bootstrap 3 网格问题 - 小列覆盖中或更大答案

【问题标题】：bootstrap 3 grid issue - small columns overriding medium or largerbootstrap 3 网格问题 - 小列覆盖中或更大
【发布时间】：2019-12-20 23:09:07
【问题描述】：

我遇到了引导网格的问题。我正在尝试在中等屏幕上创建 (3) 四列 div，在小屏幕上我正在尝试创建六列 div，它们偏移 3 列，因此它们居中。在超小屏幕上显示十二列。似乎我已经做了一百万次了……但在中型或更大的情况下，它们正在使用 .sm 类进行堆叠……不确定发生了什么？

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4">col-xs-12 col-sm-6 col-sm-offset-3 col-md-4</div><!-- close col -->
  <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4">col-xs-12 col-sm-6 col-sm-offset-3 col-md-4</div><!-- close col -->
  <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4">col-xs-12 col-sm-6 col-sm-offset-3 col-md-4</div><!-- close col -->
</div><!-- close row -->

这是一个代码笔：https://codepen.io/aaron4osu/pen/Powpezo

【问题讨论】：

标签： twitter-bootstrap-3

【解决方案1】：

您的帖子有点混乱，但我会尽力提供帮助。

您的第一个问题是 .col-offset- 使用不当，这会阻止您的列正常运行（在此处阅读有关偏移的更多信息：https://getbootstrap.com/docs/3.4/css/#grid-offsetting）

您的第二个问题是使用 .col-sm-6 三次。

使用 Bootstrap 网格系统，您的列类别必须始终等于 12（因为它是 12 列网格）。 .col-sm-6 三倍等于 18（不是 12），因此 Bootstrap 会将您的第三个 .col-sm-6 列推到其他列下方。

另外，请始终将 .container 或 .container-fluid 包裹在 .row 周围，否则稍后会遇到水平滚动等问题。

最后，为了让你的 div 在 sm 和 xs 上居中，只需使用 .col-xs-12 然后你的 div 将居中（和 100% 宽度），直到它们到达 .col-md- 断点，然后它们将是 .col-md-4 （3 列，因为 4 进入 12 三次）：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4">Column 1</div>
    <div class="col-xs-12 col-md-4">Column 2</div>
    <div class="col-xs-12 col-md-4">Column 3</div>
  </div>
</div>

【讨论】：