Question

我堆叠着一个非常简单的问题，我想知道也许你可以帮忙，因为你总是这样做.. 所以我所拥有的是一个非常基本的引导布局..说：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">looong-long-text</div>
        <div class="col-md-6">long-text</div>
        <div class="col-md-6">another long text</div>
        <div class="col-md-6">and another long text</div>
    </div>
</div>

Please check the image link to see what i need

使用bootstrap有没有简单的方法来实现这样的结果？ TNX。

Answer 1

您可以试用新的Bootstrap版本4 card column feature。

Answer 2

您不能使用开箱即用的引导程序，但还有其他工具可以帮助您完成此操作。这是其中之一： http://masonry.desandro.com/

Answer 3

我有两种解决方案：

首先（在我看来，代码更少）：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div>First</div>
      <div>Third</div>
    </div>
    <div class="col-md-6">
      <div>Second</div>
      <div>Fourth</div>
    </div>
  </div>
</div>

第二

<div class="container">
  <div class="row">
    <div class="col-md-6">
       <div class="row">
         <div class="col-md-12">
           <div>First</div>
         </div>
       </div>
       <div class="row">
         <div class="col-md-12">
           <div>Third</div>
         </div>
      </div>
    </div>
    <div class="col-md-6">
       <div class="row">
         <div class="col-md-12">
           <div>First</div>
         </div>
       </div>
       <div class="row">
         <div class="col-md-12">
           <div>Third</div>
         </div>
      </div>
    </div>
  </div>
</div>

Twitter Bootstrap非常基本的布局

3 个答案:

CODEPEN