Bootstrap更改div顺序，向右拉，向左拉3列

  • Z时代
  • 2024-01-10
  • 分类：问答

我整天都在努力，但没有提出解决方案。我在一个容器中的一行中有3列。

1：正确的内容–向右拉

2：导航–向左拉

3：主要内容

在大屏幕上看起来是什么：

------------------------------------------------
|   Menu  |      Content      |  Right Content |
------------------------------------------------

在较小的屏幕上应该是什么样子：

----------------------------
|  Menu  |  Right Content  |
|        |------------------
|        |  Content        |
----------------------------

现在看起来像什么：

------------------
| Right Content  |
------------------
| Menu | Content |
------------------

我认为这只是一个简单的浮动问题。但是我几乎尝试了所有可能性。

回答：

回答：

使用Bootstrap 3的网格系统：

<div class="container">
  <div class="row">
    <div class="col-xs-4">Menu</div>
    <div class="col-xs-8">
      <div class="row">
        <div class="col-md-4 col-md-push-8">Right Content</div>
        <div class="col-md-8 col-md-pull-4">Content</div>
      </div>
    </div>
  </div>
</div>

说明

首先，我们设置了两列，无论屏幕分辨率（col-xs-*）都将保持不变。

接下来，我们将较大的右侧列分为两列，这些列将在平板电脑大小的设备上彼此重叠，而在较低的（col-md-*）上相互重叠。

最后，我们使用匹配的类（col-md-[push|pull]-*）更改显示顺序。您将第一列的数量推到第二列，然后将第二列的数量推到第一列。

以上是 Bootstrap更改div顺序，向右拉，向左拉3列 的全部内容， 来源链接： utcz.com/qa/417973.html

回到顶部