Question

我有这段代码：

<div class="row">
  <div class="col-sm-3 col-sm-offset-6 col-md-12 col-md-offset-0"></div>
  <div class="col-sm-3 col-md-12"></div>
</div>

我想要的小（sm）屏幕是两个div，每个div有三列，第一个div的偏移量为6列。

对于中（md）屏幕，我想有两个div，每个12个列（一个水平堆叠在另一个下面），没有偏移。

浏览器不知道该类col-md-offset-0。它仍然使用col-sm-offset-6类。有什么想法吗？

Answer 1

您使用的是哪个版本的bootstrap？早期版本的Bootstrap 3（3.0,3.0.1）无法使用此功能。

col-md-offset-0应该正常工作，如此处找到的此引导示例中所示（http://getbootstrap.com/css/#grid-responsive-resets）：

<div class="row">
   <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
   <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

Answer 2

没有col - ?? - offset-0。除非已指定，否则所有“行”都假定没有偏移量。我想你想要一个小屏幕上的3行和中等屏幕上的1行。

为了得到结果，我相信你正在寻找尝试：

<div class="container">
    <div class="row">
      <div class="col-sm-4 col-md-12">
        <p>On small screen there are 3 rows, and on a medium screen 1 row</p>
      </div>
      <div class="col-sm-4 col-md-12">
        <p>On small screen there are 3 rows, and on a medium screen 1 row</p>
      </div>
      <div class="col-sm-4 col-md-12">
        <p>On small screen there are 3 rows, and on a medium screen 1 row</p>
      </div>
    </div>
  </div>

请注意，您只能在小型平板电脑上看到与您描述的内容有所区别。中等，大和超小屏幕的列跨越12。

希望这有帮助。

Answer 3

如果我找对你，你想要的东西似乎与正常情况相反：你需要小屏幕的水平布局和大屏幕上的垂直堆叠元素。您可以通过以下方式实现此目的：

<div class="container">
    <div class="row">
        <div class="hidden-md hidden-lg col-xs-3 col-xs-offset-6">a</div>
        <div class="hidden-md hidden-lg col-xs-3">b</div>
    </div>
    <div class="row">
        <div class="hidden-xs hidden-sm">c</div>

    </div>
</div>

在小屏幕上，即xs和sm，这会生成一行，其中两列的偏移量为6.在较大的屏幕上，即md和lg，它会生成两个垂直堆叠的全宽（12列）元素。

Bootstrap 3：偏移不起作用？

3 个答案: