移动设备上 Bootstrap 的列垂直堆叠

Question

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

<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>

- Devansh

Answer 1

由于您使用的是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

- Carol Skelly

Answer 2

我无法完全理解你的问题，因为你发布的HTML代码已经实现了你想要的效果：它从不在该行垂直堆叠列。

你能否澄清一下你想要问什么？请参考如何提问以获取如何提出好问题的参考。

- morre

---

它不应该将列垂直堆叠，但它正在这样做。这就是我无法理解的地方。这里是一个链接： https://codepen.io/devanshchawla/pen/EmmNEw 你有什么想法，我可能做错了什么？ - Devansh

你发布的示例没有将列垂直堆叠。你的浏览器中是否有任何插件会影响布局？ - morre

当我使用手机访问时，它会将列垂直堆叠。我已经尝试了Google Chrome和Firefox浏览器，但我不认为我有任何插件或附加组件。 - Devansh

如果您在公共位置有它，请发布链接。我尝试使用100*100像素的屏幕进行复制，但仍无法堆叠。请编辑您的问题并发布完整的HTML以及您包含和/或编辑的任何其他CSS。 - morre

@ZimSystem，你说的是什么？ - morre