如何在 Bootstrap 中对齐相邻列的高度答案

【问题标题】：How to align height of neighboring columns in Bootstrap如何在 Bootstrap 中对齐相邻列的高度
【发布时间】：2020-03-31 05:40:10
【问题描述】：

我想实现这样的目标：

这是什么，我目前正在使用 Bootstrap：

我想实现以下目标：

宽度比率必须满足Sites : User : Download = 2:8:2
Sites-Banner、Sites-Search、Download-Banner、Download-Summary 都应该具有相同的高度
User-Login 必须是Sites-Banner 和Sites-Search 的组合高度（或Download-Banner 和Download-Summary）
Sites-List、User-Operations、Download-Details 的高度必须是独立的，并且可以根据需要进行扩展。

这是我的代码：Fiddle（检查更新 1）

<div>
  <div class="row">
    <div class="col-2">
      <div class="row">
        <div class="col bg-primary">
          <p id="sites-banner">Sites Banner</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-secondary">
          <p id="sites-search">Sites Search</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-success">
          <p id="sites-list">Sites List</p>
        </div>
      </div>
    </div>
    <div class="col-8">
      <div class="row">
        <div class="col bg-danger">
          <p id="user-login">User Login</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-warning">
          <p id="user-operations">User Operations</p>
        </div>
      </div>
    </div>
    <div class="col-2">
      <div class="row">
        <div class="col bg-info">
          <p id="downloader-banner">Download Banner</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-light">
          <p id="download-summary">Download Summary</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-dark">
          <p id="download-details">Download Details</p>
        </div>
      </div>
    </div>
  </div>
</div>

我无法将User-Login 的高度与Sites-Banner 和Sites-Search 对齐[完成：更新1]
Sites-List, User-Operations & Download-Details 不独立扩展

更新 1： New Code

我得到User-Login 的组合高度为Sites-Banner 和Sites-Search，方法是将它们包装在一个row (<div class="row">) 中
但我仍然无法达到Sites-List、User-Operations、Download-Details的高度独立。

更新 2： New Code

让Sites-List、User-Operations、Download-Details 的高度看起来独立。
但是列之间有很多填充，这会在它们之间引入空白，使它们看起来不对齐

更新 3： Fiddle

虽然在 Update 2 代码中看起来 Sites-List、User-Operations 和 Download Details 具有不同的高度，但它们实际上并没有。它们看起来如此，因为我们仅将背景颜色类应用于包含列表的 div 元素。

关于列之间的填充问题，可以通过在两行上应用mx-0类属性来解决，将边距设为0 默认情况下，行的负边距为 -15 px。结帐：Bootstrap negative margin on rows

没有mx-0 会导致页面出现水平滚动条。结帐：Bootstrap columns cause horizontal scrollbar

总结：

将row 和col 视为表的tr 和td
始终将内容放入col
col 必须有 row 作为父级。结帐：Bootstrap Grid Working & Guidlines

【问题讨论】：

也许这有点帮助stackoverflow.com/questions/16351404/…
@ikiK 谢谢！现在我明白我需要创建 2 行。请检查更新，因为我无法让 row2 中 cols 的高度独立。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

.col p{
  margin: 0;
}

.user-login{
  height: 100%
}

<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Downloader</title>
  </head>

  <body>

    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <div class="bg-primary">
            <p>Sites-Banner</p>
          </div>
          <div class="bg-secondary">
            <p>Sites-Search</p>
          </div>
        </div>
        <div class="col">
          <div class="bg-danger user-login">
            <p>User-Login</p>
          </div>
        </div>
        <div class="col">

          <div class="bg-info">
            <p>Download-Banner</p>
          </div>
            <div class="bg-light">
              <p>Download-Summary</p>
            </div>

        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="bg-success">
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
          </div>
        </div>
        <!-- <div class="clearfix"></div> -->
        <div class="col">
          <div class="bg-warning">
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
          </div>
        </div>
        <!-- <div class="clearfix"></div> -->
        <div class="col">
          <div class="bg-dark">
            <p>Download-Details</p>
            <p>Download-Details</p>
            <p>Download-Details</p>
            <p>Download-Details</p>
          </div>
        </div>
      </div>
    </div>

  </body>

</html>

【讨论】：

谢谢！现在我明白我需要创建 2 行。请检查更新，因为我无法让 row2 中 cols 的高度独立。
请检查我更新的代码。你想达到这个目的吗？
谢谢！我会接受你的回答，因为它解决了我的两个问题。但是在更新后的代码中，列之间有很多填充，这会引入空白并使它们看起来不对齐。有办法解决吗？