如何在PC上显示3列，而在移动设备上仅显示1列？

Question

我正在尝试在页面上包含所有内容的大行并将其全部居中，以使其适合中间的一个大列，而在左/右具有另外两列（如图中所示）。背景颜色供我查看其大小。

<div class="row">
  <div class="col-sm-8" style="background-color:gray;">s</div>
  <div class="col-lg-1" style="background-color:gray;">s</div>
  <div class="col-sm-8" style="background-color:gray;">s</div>
</div>

该怎么办，这样我才能在桌面上看到所有3列，而在移动设备上只能看到中间的那一列？

Answer 1

如果您希望它在不同的位置断开，则可以使用不同的网格选项（https://getbootstrap.com/docs/4.0/layout/grid/#grid-options）类。我已经更新下面的代码以使用本机Bootstrap宽度。我知道您说过您正在寻找〜950 px断点，所以您的选择是1.用自定义宽度重新编译Bootstrap，或者2.使用宽度大于等于992px的内置lg类。为了便于实现，我使用lg类更新了以下类。

通过Bootstrap 4，您可以使用.d-none和.col-lg-实用工具类（https://getbootstrap.com/docs/4.1/utilities/display/）来实现以下目的：

<div class="row">
    <div class="d-none d-lg-block col-lg-1">
        show 1 column on >= 992px, hide < 991px
    </div>

    <div class="col-12 col-lg-10">
        show on >= 992px full, < 991px 10 columns
    </div>

    <div class="d-none d-lg-block col-lg-1">
        show 1 column on >= 992px, hide < 991px
    </div>
</div>

根据中间列的内容，可以使用其他各种网格类（https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width）来调整任何列的宽度（例如，col-sm-1太小而不能左/右列）。

示例https://codepen.io/anon/pen/WLyGpW