我正在尝试制作 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 --> 
    

这是移动设备上的问题:

请您参考如下方法:

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

  <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 屏幕指定任何内容,因为您指定的是相同的尺寸。


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!