2

我有以下内容：

<div class="container-fluid">
   <div class="row-fluid">
      <div class="span3"></div>
      <div class="span3"></div>
      <div class="span3"></div>
      <div class="span3"></div>
   </div>
</div>

默认情况下，这个 div.span* 跨越屏幕的整个宽度，如下所示：

[x][x][x][x]

在一定的屏幕宽度下，我希望它出现在 2x2 网格中，如下所示：

[x][x]
[x][x]

我该怎么做呢？

4

3 回答 3

4

很抱歉我之前的尝试，我没有完全理解你的问题：

除非您使用自己的 @media 选择器，否则您正在尝试使用引导程序的事情实际上是不可能的。有一个名为Neat的库。我认为这是一个例子您正在寻找

早期的尝试：

试试这个，从这里：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6">
      <div class="row-fluid">
        <div class="span6">A</div>
        <div class="span6">B</div>
      </div>
      <div class="row-fluid">
        <div class="span6">C</div>
        <div class="span6">D</div>
      </div>
    </div>
  </div>
</div>

这应该会给你以下结果：

[A][B] 
[C][D]

那是很多divs。不确定这是否可以变得更轻。

于 2013-02-10T13:55:04.947 回答
1

最初的问题似乎是针对旧版本的引导程序。

这是在 Bootstrap 3 标记中巧妙地解决问题的方法。关键元素是clearfix影响xs和sm视口的 div [典型用例]。（sm不包括在下面的示例中）。

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

通过 getbootstrap.com

于 2015-12-03T19:01:00.180 回答
0

这里有 2 个响应式选项，无需媒体查询。调整窗口大小以查看它们的反应。

CSS 列：

http://jsfiddle.net/88t4L/

.row-fluid {
    columns: 2 8em;
}

在这里，列必须至少为 8em 宽，但如果有空间让所有列出现在一行中，它就会这样做。

http://caniuse.com/#search=columns

CSS 弹性盒：

http://jsfiddle.net/88t4L/1/

.row-fluid {
    display: flex;
    flex-flow: row wrap;
}

.row-fluid .span3 {
    flex: 1 0 8em; /* grow equally, don't shrink, preferred width of 8em */
}

http://caniuse.com/#search=flexbox

于 2013-02-10T16:53:51.230 回答