改变Bootstrap网格系统

Question

所以目前我的网站布局看起来是这样的，它的顺序如下

<div class="container">
    <div class="row">
        <div class="col-md-3">
             col-md-3 left
        </div>
        <div class="col-md-6">
             element 1 
             <br/>
             element 2
        </div>
        <div class="col-md-3">
             col-md-3 right
        </div>
    </div>
</div>

但是我希望element 2位于类col-md-6的新div中，以便它在col-md-3之后完美堆叠，这就是我想要它的方式

<div class="container">
    <div class="row">
        <div class="col-md-3">
             col-md-3 left
        </div>
        <div class="col-md-6">
             element 1 
        </div>
        <div class="col-md-3">
             col-md-3 right
        </div>
    </div>
    <div class="col-md-6 col-md-offset-3">
        element 2
    </div>
</div>

但是当我使用这段代码时，这就是我得到的。

如何将div类col-md-6设置为element2

来实现pic1

我希望带有col-md-6类的element2在两个col-md-3 div 之间

Answer 1

好的，所以这取决于元素内容的构成，可能就像更改

一样简单

<div class="col-md-6">
     element 1 
     <br/>
     element 2
</div>

进入这个

<div class="col-md-6">
     <div class="tophalf">
        element 1 
     </div>
     <div class="bottomhalf">
        element 2
     </div>
</div>

哪会成功划分您的元素，但这会增加其他几个问题。根据元素的性质，你可能会遇到col-md-3内容延伸到元素底部的问题2.要解决此问题，你可以设置外部列的高度（使用css中的#tag和在你的html中id =“”这个主题有很多很多问题，这里有一对：

First Stack Question

Second More Popular Question

Another Possibly Relevant Link

如果您想查看代码，我设法快速启动并运行示例，但我打赌您可以从上面的信息中找出答案。对不起，我没有更多的信息给你 - 我希望你能得到另一个更有帮助的答案！

Answer 2

为div element2添加了一个具有所需宽度的自定义类，以便它可以关闭。