为什么引导列会中断到新行？

发布于 2025-01-09 13:57:09 字数 1569 浏览 1 评论 0原文

这是我的代码：

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 是侧柱的尺寸。这是图片

现在问题是： 这就是手机上的样子。问题是，并没有像我希望的那样看到一行上的 3 列保持 8:2 的比例。相反，它分成 3 列。

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

原文

Here is my code:

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>

The light gray column with the red border is the main column.
Here is what it looks like when the browser is at the approximate size of a tablet, it is properly maintaining the ratio of 6:3 I want. With the 6 being the size of the main column and 3 being the size of the side columns. This is the image

Now here is the problem:
this is what it looks like on a cell phone
. The problem is that instead of seeing 3 columns on one line maintaining a ratio of 8:2, like I want it to. Instead, it breaks of onto 3 columns.

How do I solve this issue? By the way, I want the columns to have different sizes depending on the size of the screen.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赠意 2025-01-16 13:57:09

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

In bootstrap, "col-sm" starts at 768 pixels. To target small screens, you can use "col-xs" (576 pixels or more) or "col" for even smaller screens.

Just replace "col-sm-2" by "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>

回复收藏 0 原文

~没有更多了~