css - 推特 Bootstrap 网格 : Setting different sizes for mobile

Question

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

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

2. 当窗口调整为移动设备 (480 像素) 时，我希望 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”时，您的代码指定在小屏幕和向上屏幕上，您希望一列宽度为 3/4，另一列宽度为 1/4，尺寸分别为 8 和 4 .在比小屏幕还小的屏幕上，您希望列堆叠。

您实际上不需要为 lg 屏幕指定任何内容，因为您指定的是相同的尺寸。