html - 改变 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 和id=""在你的 html 中)关于那个主题有很多很多问题，这里有几个:

First Stack Question

Second More Popular Question

Another Possibly Relevant Link

如果您想查看代码，我设法启动并运行了一个快速示例，但我敢打赌您可以从上面的信息中弄清楚。抱歉，我没有更多信息可以提供给您 - 我希望您能得到另一个更有帮助的答案!