Bootstrap 4中列之间的空白垂直空间

Posted 2023-03-05

【中文标题】Bootstrap 4中列之间的空白垂直空间

【英文标题】：Empty vertical space between columns in Bootstrap 4

【发布时间】：2018-08-16 19:44:11

【问题描述】：

我有这个 html 结构：

<div class="container">
   <div class="row">
      <div class="col-lg-9 description"></div>
      <div class="col-lg-3 sidebar"></div>
      <div class="col-lg-9 comments"></div>
   </div>
</div>

最终效果是这样的： 我需要这种 HTML 结构，因为当我有一个较小的视口并且 Bootstrap 切换到 1 列模式时，我需要侧边栏列位于描述和 cmets 列之间（实际上是空白区域）。

问题是当模板不处于“移动模式”时，我想避免有那个空白空间。

我尝试了很多方法，但我无法做到这一点，有人可以帮助我吗？

编辑

我试过这样：

<div class="container">
   <div class="row">
      <div class="col-lg-9">
         <div class="description"></div>
         <div class="comments"></div>
      </div>
      <div class="col-lg-3 sidebar"></div>
   </div>
</div>

并尝试通过使用 css“订单”重新排序，但没有成功（它允许我做的唯一一件事就是将侧边栏放在页面的开头，但这不是我想要的）。

【问题讨论】：

这会帮助你：v4-alpha.getbootstrap.com/layout/grid/#reordering

【参考方案1】：

发生这种情况是因为 Bootstrap 4 是 flexbox，并且所有列的高度都与最高列的高度相同...

而不是这个：

 ------------------  ---------
|                  ||         |
|                  ||         |
 ------------------ |         |
 ------------------ |         |
|                  ||         |
 ------------------  ---------

你明白了：

 ------------------  ---------
|                  ||         |
|                  ||         |
 ------------------ |         |
                    |         |
                    |         |
 ------------------  ---------
|                  |
 ------------------

---

通常，您可以通过嵌套列来解决此问题（如您尝试的那样），但是您将无法获得所需的列顺序....

嵌套：

<div class="container">
    <div class="row">
        <div class="col-lg-9">
            <div class="row">
                <div class="col-lg-12 description"></div>
                <div class="col-lg-12 commments"></div>
            </div>
        </div>
        <div class="col-lg-3 sidebar"></div>
    </div>
</div>

但是，要获得所需的列顺序，列必须包含在单个 .row 中。

浮动：

因此，BS4 中的解决方法是使用浮点数（就像 BS3 一样），如下所述： Bootstrap 4 - I don't want columns to have the same height。像这样：

https://www.codeply.com/go/wnRnLl3Jmo

<div class="container">
   <div class="row d-lg-block">
      <div class="col-lg-9 float-left description">Desc</div>
      <div class="col-lg-3 float-right sidebar">Sidebar</div>
      <div class="col-lg-9 float-left comments">Comments</div>
   </div>
</div>

d-lg-block 在行上设置display:block 而不是display:flex，后者允许列在lg 屏幕宽度中浮动。

相关：Bootstrap with different order on mobile version

【讨论】：

非常感谢，第二个解决方法正是我所需要的，并且像魅力一样工作。可能，这有点“凌乱”的解决方案，但似乎这是获得我需要的列顺序的唯一方法。

【参考方案2】：

.description 
  background-color: red


.sidebar 
  background-color: blue


.comments 
  background-color: green

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-12 description">description</div>
  </div>
  <div class="row justify-content-end">
    <div class="col-12 col-lg-3 sidebar">sidebar</div>
  </div>
  <div class="row">
    <div class="col-12 col-lg-9 comments">comments</div>
  </div>
</div>
</div>

我想这就是你想要的

【讨论】：

这不是我需要的：在 sn-p 中，描述列采用 100% 的宽度，而侧边栏列已经生成空白空间。

尝试再次运行sn-p，然后按整页，sn-p 显示它在移动设备上的外观