Question

我知道有几种方法可以做到这一点，但我想把它放在那里看看是否有任何干净/好的方法来做到这一点，因为我没有运气搜索。

所以在Bootstrap中，我基本上有一个在780px以下的全宽。考虑到这一点，这是一个独特的情况，当视口变小时，该部分实际上会变大。

让我试着澄清......说整个页面宽度是1200px而我正在使用容器 - ＆gt;行 - ＆gt; col-md-9＆amp; col-md-3。 col-md-3就在旁边。 col-md-3内部是一个带有2x col-sm-6 div的嵌套网格的表单。因此，当页面在断点处下降时，当它低于980px时，旁边变为全宽，因此宽度大于1200px。

设置Bootstrap，因此如果使用col-sm-6，则列在780px下从50％宽度变为100％宽度。我需要弄清楚如何做到与此相反。

我需要col-sm-6（或者我需要定制标签等）在780px下从100％长度到50％长度。

我该怎么做？提前谢谢！

<div class="container">
  
  <div class="row">
  
    <div class="col-sm-6">Box 1</div>
    
    <div class="col-sm-6">Box 2</div>
    
  </div>
  
<div>

所以在上面的示例中...框1和框2保持彼此相邻，直到视口宽度低于768px。

写这个的最好方法是什么，所以Box 1和Box 2被堆叠，直到视口低于768px宽...然后它们会在同一行/内联/其他地方？

Answer 1

您可以在引导程序col-*-*中的任何列上使用多个row类。在您的情况下，您可以使用col-xs-6 col-sm-12使任何列并排显示在最小的布局上，但堆叠在上面的任何列上：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-12">
      Box 1
    </div>
    <div class="col-xs-6 col-sm-12">
      Box 2
    </div>
  </div>
</div>

这是一个Bootply来证明这种行为。

使用Bootstrap 3，当断点变小时，如何解除cols的堆叠？

1 个答案: