在移动设备上垂直堆叠的引导列

Posted 2023-03-05

【中文标题】在移动设备上垂直堆叠的引导列

【英文标题】：Bootstrap columns stacking vertically on mobile device

【发布时间】：2017-09-28 02:35:40

【问题描述】：

我有一个简单的引导网格布局。即使在小型设备上，我也不希望列垂直堆叠。

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

【参考方案1】：

我不太清楚这个问题，因为您发布的 html 完全符合您的要求：它从不垂直堆叠该行的列。

你能澄清一下你想问什么吗？请参阅How To Ask，了解如何提出好的问题。

【讨论】：

它不应该垂直堆叠列，但它是。这是我无法理解的。这是一个链接：codepen.io/devanshchawla/pen/EmmNEw 知道我可能做错了什么吗？

您发布的示例没有垂直堆叠列。您的浏览器中是否有可能影响布局的插件？

当我使用手机访问它时，它正在垂直堆叠列。我试过谷歌浏览器和火狐。我不认为我有任何插件或插件。

如果您可以在某处公开访问，请发布链接。我试图用 100*100px 的屏幕重现它，但它仍然没有堆叠。请编辑您的问题并发布完整的 HTML 以及您包含和/或编辑的任何其他 CSS。

@ZimSystem 这样做了，你到底指的是什么？

【参考方案2】：

列垂直堆叠，因为您使用的是 Bootstrap 4，并且不再使用 -xs- 中缀。只需使用col-4..

  <div class="container border-show center-div">
    <div class="row">
      <div class="col-4 border-show">1</div>
      <div class="col-4 border-show">2</div>
      <div class="col-4 border-show">3</div>
    </div>
  </div>

http://www.codeply.com/go/sCct2CzZte