Bootstrap/Foundation 堆叠 rows/columns

Question

我正在尝试实现非常简单的两行堆叠，但似乎找不到解决方案。我已经尝试了 Bootstrap 和 Foundation 的解决方案。正如您在照片中看到的那样，我有 2 行，每行有 3 列。当屏幕尺寸为 medium/small 时，我需要将列分为两部分，标题 4 应位于标题 3 旁边，而标题 5 应位于标题 3 下方。 Heading6 在后记之后。

先谢谢大家了！

how it is

what I'm trying to achieve

Bootstrap代码

<div class="row>
    <div class="col-md-4 col-sm-6">
        <h2>Heading1</h2>
    </div>
    <div class="col-md-4 col-sm-6">
        <h2>Heading2</h2>
    </div>
    <div class="col-md-4 col-sm-6">
        <h2>Heading3</h2>
    </div>
</div>

<div class="row">
    <div class="col-md-4 col-sm-6">
        <h2>Heading4</h2>    
    </div>
    <div class="col-md-4 col-sm-6">
        <h2>Heading5</h2>
    </div>
    <div class="col-md-4 col-sm-6">
        <h2>Heading6</h2>
    </div>
</div>

基础代码

 <div class="row">
  <div class="large-4 medium-6 columns">
    <div class="primary callout">
      <p>Four columns</p>
    </div>
  </div>
  <div class="large-4 medium-6 columns">
    <div class="primary callout">
      <p>Four columns</p>
    </div>
  </div>
  <div class="large-4 medium-6 end columns">
    <div class="primary callout">
      <p>Four columns</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="large-4 medium-6 columns">
    <div class="primary callout">
      <p>Four columns</p>
    </div>
  </div>
  <div class="large-4 medium-6 columns">
    <div class="primary callout">
      <p>Four columns</p>
    </div>
  </div>
  <div class="large-4 medium-6 columns">
    <div class="primary callout">
      <p>Four columns</p>
    </div>
  </div>
</div>

Answer 1

让我们尝试在 Bootstrap 之前完成。

我们只需要一行六个单元格。这是因为 Bootstrap wraps the extra cells onto new lines.

带有 class col-xs-6 的块从 12 列中取 6。它恰好是屏幕宽度的一半。此 class 有效，直到 a condition for a wider screen 开始起作用。当屏幕为 992px 或更宽时，带有 class col-sm-4 的块占据屏幕宽度的三分之一。

请检查结果。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-4">
      <h2>Heading1</h2>
    </div>
    <div class="col-xs-6 col-md-4">
      <h2>Heading2</h2>
    </div>
    <div class="col-xs-6 col-md-4">
      <h2>Heading3</h2>
    </div>
    <div class="col-xs-6 col-md-4">
      <h2>Heading4</h2> 
    </div>
    <div class="col-xs-6 col-md-4">
      <h2>Heading5</h2>
    </div>
    <div class="col-xs-6 col-md-4">
      <h2>Heading6</h2>
    </div>
  </div>
</div>

Answer 2

无需使用两个不同的行。 Bootstrap 默认将额外的 cells/columns 包装在下一行。 Read documentation

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <div class="container">
<div class="row">
    <div class="col-md-4 col-sm-6">
        <h2>Heading1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          sed do eiusmod tempor 
          incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud 
          exercitation ullamco laboris nisi ut aliquip ex ea commodo 
          consequat. Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur
      </p>
      <button class="btn btn-default"> more info.</button>
    </div>
    <div class="col-md-4 col-sm-6">
        <h2>Heading2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          sed do eiusmod tempor 
          incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud 
          exercitation ullamco laboris nisi ut aliquip ex ea commodo 
          consequat. Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur
      </p>
      <button class="btn btn-default"> more info.</button>
    </div>
    <div class="col-md-4 col-sm-6">
        <h2>Heading3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          sed do eiusmod tempor 
          incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud 
          exercitation ullamco laboris nisi ut aliquip ex ea commodo 
          consequat. Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur
      </p>
      <button class="btn btn-default"> more info.</button>
    </div>



    <div class="col-md-4 col-sm-6">
        <h2>Heading4</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          sed do eiusmod tempor 
          incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud 
          exercitation ullamco laboris nisi ut aliquip ex ea commodo 
          consequat. Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur
      </p>
  <button class="btn btn-default"> more info.</button>
    </div>
    <div class="col-md-4 col-sm-6">
        <h2>Heading5</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          sed do eiusmod tempor 
          incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud 
          exercitation ullamco laboris nisi ut aliquip ex ea commodo 
          consequat. Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur
      </p>
      <button class="btn btn-default"> more info.</button>
    </div>
    <div class="col-md-4 col-sm-6">
        <h2>Heading6</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          sed do eiusmod tempor 
          incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud 
          exercitation ullamco laboris nisi ut aliquip ex ea commodo 
          consequat. Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur
      </p>
      <button class="btn btn-default"> more info.</button>
    </div>
</div>
  </div>

Bootstrap/Foundation 堆叠 rows/columns

Bootstrap/Foundation stacking rows/columns

javascript

rows

zurb-foundation

twitter-bootstrap-3