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

【问题标题】：Twitter Bootstrap Grid: Setting different sizes for mobileTwitter Bootstrap Grid：为移动设备设置不同的大小
【发布时间】：2013-12-09 06:05:57
【问题描述】：

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

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

当窗口大小调整为移动设备（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 -->

这是移动端的问题：

【问题讨论】：

标签： css twitter-bootstrap

【解决方案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 屏幕指定任何内容，因为您指定的是相同的尺寸。

【讨论】：

【解决方案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。

【讨论】：

但这似乎将两个 div 放在不同的区域，一个在另一个之上。他们一直在堆叠。我希望 div 在大尺寸和中型屏幕上位于同一行，彼此相邻，然后在移动设备或 xs 类上堆叠。

【解决方案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% 的宽度。现在工作得很好。

【讨论】：

【解决方案4】：

下面的将解决问题。屏幕尺寸小，UP 将有 3/4 和 1/4 的 col 尺寸。小于小的屏幕将具有 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>

【讨论】：