为什么 bootstrap 列会换行？

Question

这是我的代码：

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.row {
  width: 100%;
  height: 80%;
  margin: 0px;
  padding: 0px;
}

body {
  background: #EFEFEF;
}

.container-fluid {
  width: 100%;
  height: 80%;
  margin: 0;
  padding: 0px;
  border: 3px solid;
  border-color: #848484
}

.navbar-brand {
  position: absolute;
  margin-top: auto;
  margin-left: 20px
}

#post-container {
  margin-left: auto;
  margin-right: auto;
  border: 3px solid;
  border-color: #FF0000
}

<div class="container-fluid">
  <nav class="navbar"> <img class="navbar-brand" src="images/Ventr_Logo.svg" alt="Ventr Logo" width="100"> </nav>
  <div class="row">
    <div class="col-lg-4 col-md-3 col-sm-2" style="background: #4E4E4E"></div>
    <div class="col-lg-4 col-md-6 col-sm-8" id="post-container">
    </div>
    <div class="col-lg-4 col-md-3 col-sm-2" style="background: #4E4E4E"></div>
  </div>

带红色边框的浅灰色栏为主栏。这是当浏览器的大小与平板电脑差不多时的样子，它正确地保持了我想要的 6:3 比例。 6 是主列的大小，3 是侧列的大小。 This is the image

现在问题来了： this is what it looks like on a cell phone .问题是，而不是像我希望的那样在一行中看到 3 列保持 8:2 的比率。相反，它分为 3 列。

我该如何解决这个问题？顺便说一句，我希望列的大小根据屏幕的大小而不同。

Answer 1

在 bootstrap 中，“col-sm”从 768 像素开始。要定位小屏幕，您可以使用“col-xs”（576 像素或更多）或“col”（适用于更小的屏幕）。

只需将“col-sm-2”替换为“col-2”即可：

  <div class="row" >
    <div class="col-lg-4 col-md-3 col-2" style="background: #4E4E4E"></div>
    <div class="col-lg-4 col-md-6 col-8" id="post-container">
    </div>
   <div class="col-lg-4 col-md-3 col-2" style="background: #4E4E4E"></div>
</div>

为什么 bootstrap 列会换行？

Why are bootstrap columns breaking off onto new lines?

html

css

twitter-bootstrap

bootstrap-5