Bootstrap 弹性柱

Posted 2023-03-06

【中文标题】Bootstrap 弹性柱

【英文标题】：Bootstrap Flex Column

【发布时间】：2019-05-04 08:23:55

【问题描述】：

我已经建立了自己的网站，现在正努力使其具有响应性。我的问题与我网站上的一个页面有关，该页面由 8 个完整的视口高度容器组成。使用 Bootstrap 4 将这些容器分成两个相等的列（水平并排对齐）。对于任何小于 iPad/平板电脑的设备，我希望能够将这两列垂直对齐。这可能吗？如果是这样，我该如何实现这一目标。关键是我只希望小型设备的列以这种方式对齐。

【问题讨论】：

请参阅How to Ask。您没有提供足够的信息。

【参考方案1】：

据我了解，您没有获得可折叠的列。

您的列在某些屏幕宽度处未折叠可能有多种原因：

引导程序未正确链接。我在下面的代码 sn-p 中给出了 Bootstrap 4.1.3 缩小版的示例。 Bootstrap 已过时，您使用的旧版本与现有代码不匹配。 一个常见的错误是没有将您的 col 包裹在 <div class="row"> 中。 您没有指定列的折叠状态，可以是 col-[sm/md/lg/xl]-

使用col-md 时，引导列应自动以768px 宽度堆叠。这会随着每个可折叠状态而变化。

如果您想了解更多关于 Bootstraps 网格系统的信息，您可以click here

作为示例，这里有一个代码 sn-p，您可以使用它以供将来参考：

.container .row .col-md-4 
  border: 1px solid red;

<!-- BOOTSTRAP CDN LINK -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <!-- Make col-4, col-[sm/md/lg/xl]-4 for different screen widths -->
    <div class="col-md-4"><p>Column 1<p></div>
    <div class="col-md-4"><p>Column 2<p></div>
    <div class="col-md-4"><p>Column 3<p></div>
  </div>
</div>

*注意： 要查看此代码 sn-p 的工作情况，请将其展开到全屏和/或更改代码 sn-p 的宽度，直到发生折叠。