javascript - Bootstrap/Foundation 堆叠行/列

Question

我正在尝试实现非常简单的两行堆叠，但似乎找不到解决方案。我尝试过 Bootstrap 和 Foundation 来寻求解决方案。正如您在照片中看到的，我有 2 行，每行 3 列。当屏幕尺寸为中/小时，我需要将列分成两部分，标题 4 应该位于标题 3 旁边，标题 5 位于标题 3 下方。标题6 接在后记之后。

提前非常感谢大家!

how it is

what I'm trying to achieve

引导代码

<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 .

类为 col-xs-6 的 block 从 12 列中取出 6 列。它正好是屏幕宽度的一半。这个类有效，直到 a condition for a wider screen开始行动。当屏幕为 992px 或更宽时，类 col-sm-4 的 block 占据屏幕宽度的三分之一。

请检查结果。

<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>