Twitter Bootstrap Grid：为移动设置不同的大小

Question

我正在尝试制作Bootstrap网格布局。我想要做的是在同一个div中有一个较大的列（col大小为8）和一个较小的列（col大小为4）的行。我能够轻松地完成这项工作。我现在遇到的问题是，当浏览器调整大小时，col大小4会低于较大的col大小8，但是尽管我的代码仍然存在，但是当我在我指定的时候仍然继承了col大小4在小型移动设备上我希望它是col-xs-12的代码。任何想法为什么它包裹在下面，并在480px屏幕宽度时保持col大小4？它应该是12.所以要快速重申：

1. 我希望该行包含8列和4列，我已经完成了。

2. 当窗口调整为移动设备（480px）时，我希望将4号列包裹在8列以下，并将尺寸设置为12，以适应整个屏幕。这是我的代码：

   <div class="container">
   
   
   
     <div class="row">
   
   
         <div class="col-xs-12 col-sm-8 col-md-8 contact-area">larger column</div>
         <div class="col-xs-12 col-sm-4 col-md-4 social-area">smaller column</div>
   
   
   
   
     </div><!-- END CONTACT ROW -->
   
   </div><!-- END CONTAINER -->
   

以下是移动设备上的问题：

Answer 1

发生这种情况的原因是原始代码

  <div class="col-xs-12 col-sm-8 col-md-8 contact-area">larger column</div>
  <div class="col-xs-12 col-sm-4 col-md-4 social-area">smaller column</div>

您指定超小屏幕上的每列和UP应该是完整大小12.这导致它们堆叠，因为两列都不能是全宽。

当您删除“col-xs-12”时，您的代码指定在小屏幕和UP上，您希望一列为3/4宽度，另一列为1/4，大小分别为8和4 。在小于小的屏幕上，您希望列堆叠。

您实际上不需要为lg屏幕指定任何内容，因为您指定了相同的大小。

Answer 2

您需要为每个div设置row：

<div class="container">
    <div class="row">
       <div class="col-xs-12 col-sm-8 col-md-8 contact-area">larger column</div>
    </div><!-- END CONTACT ROW -->
  <div class="row">
       <div class="col-xs-12 col-sm-8 col-md-8 contact-area">smaller column</div>
    </div><!-- END CONTACT ROW -->
</div><!-- END CONTAINER -->

一个row必须最多为12 col，这意味着您可以在6-col进行一次潜水，在6-col进行另一次潜水。但你不能拥有12-col和12-col。

Answer 3

好的，我已经明白了。

<div class="container">




  <div class="row">
   <div class="col-lg-8 col-md-8 contact-area">larger column</div>
   <div class="col-lg-4 col-md-4 social-area">smaller column</div>
  </div><!-- END CONTACT ROW -->





</div><!-- END CONTAINER -->

所以这样他们在大屏幕和中等屏幕上彼此靠近，并且没有任何类型的sm或xs类，他们只是在那些断点处做了100％的宽度。现在工作得很好。

Answer 4

以下将解决问题。屏幕尺寸小，UP将具有3/4和1/4的尺寸。小于小的屏幕将具有100％的宽度并垂直堆叠。

<div class="row">
   <div class="col-sm-8 contact-area">larger column</div>
   <div class="col-sm-4 social-area">smaller column</div>
 </div>