Bootstrap 4 - 将 div 垂直对齐到列的底部答案

【问题标题】：Bootstrap 4 - Vertically align a div to a bottom of a columnBootstrap 4 - 将 div 垂直对齐到列的底部
【发布时间】：2020-01-07 16:27:36
【问题描述】：

我有一个两列布局，左侧一个元素，右侧两个元素。

如何保持右列中的最后一个元素相对于左列底部对齐？

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

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>Bare - Start Bootstrap Template</title>

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

</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Page Content -->
<div class="container-fluid">
  <div class="row">
      <div class="col-7">
          <div class="card card-block">
              <h3>Column 1</h3>
              <br />
              <br />
              <br />
              <p>..end of content</p>
          </div>
      </div>

      <div class="col-5">
          <div class="row no-gutters">
              <div class="col-12">
                <div class="card card-block">
                  <h3>Column 2</h3>
                </div>
              </div>

              <div class="col-12 align-self-end">
                <div class="card card-block">
                  <h3>Column 3</h3>
                </div>
              </div>
          </div>
      </div>
  </div>
</div>

<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>

</html>

感谢您的帮助！

【问题讨论】：

您能否草拟一下您希望列的显示方式？这个问题还不清楚
请删除
标签
您已将
用于左列，您是否希望 No.4 div 与该列内联？
我认为多米尼克在这里只是想说明他希望持有数字 4 的列垂直对齐到左列的底部（因此，与数字 2 具有“相同的高度”我们在这里看到。
所以有一个示例图片。 br 用于说明左列的高度。

标签： html bootstrap-4

【解决方案1】：

通过将.align-items-end 添加到父行，它会将列垂直对齐到它的底部。

如果您想将第 3 列放在顶部但保留第 4 列的当前位置，我建议您查看名为 eqHeight 的 jQuery 库。这将允许您将父列（col-7 和 col-5）拉伸到相同的高度，之后第 3 列应该在第 1 列的顶部。

<!-- Page Content -->
<div class="container-fluid">
  <div class="row align-items-end">
      <div class="col-7">
          1<br>
          <br>
          <br>
          2
      </div>

      <div class="col-5">
          <div class="col-12">
              3
          </div>

          <div class="col-12 align-self-end">
              4
          </div>
      </div>
  </div>
</div>

【讨论】：

以更简单的方式讲述；您将需要 eqHeight（或类似的）库来确保列的高度始终相等。只有这样，您才能开始垂直对齐其中的元素。您还可以为这两列设置固定高度，但使用响应式设计通常会忽略此选项。

【解决方案2】：

Why not use different row for 1 - 3  and 2 - 4.
Because you have using bootstrap grid system. 

7 col - 5 col
-------------

Bootstrap two column layout

Kindly add style in fourth column div. 

style="position: absolute;bottom: 0px;"

<!-- Page Content -->
<div class="container-fluid">
        <div class="row">
    <div class="col-7">
        1 <br />
        <br />
        <br />
        <br />
        2
    </div>

    <div class="col-5">
        <div class="row no-gutters">
             <div class="col-12 align-self-end">
                3
            </div>  
            </div>
            <div class="row no-gutters"  >
             <div class="col-12 align-self-end" style="position: absolute; 
            bottom: 0px; ">
                4
            </div>             

        </div>
    </div>
 </div>
</div>

【讨论】：

问题是，左边的col是一个元素，而且要高得多。所以2行没有机会。
同样，左侧的 col 是一个元素。 2 不像新的行更像是元素的末尾。我在我的帖子里改了。所以现在应该清楚多了。
Cheers 在实际示例中看起来不错。对媒体查询进行一些测试。非常感谢！

【解决方案3】：

这可能是您正在寻找的：

<div class="row">
    <div class="col-md-6">
        1
    </div>
    <div class="col-md-6">
        3
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        2
    </div>
    <div class="col-md-6">
        4
    </div>
</div>

或

<div class="row">
    <div class="col-md-6">
        1
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                2
            </div>
            <div class="col-md-12">
                3
            </div>
        </div>
    </div>
</div>

【讨论】：

我对行的错误，我改变了它，但它没有帮助:(
谢谢，但是左边的 col 高度要大得多，而且是一个元素，所以没有机会 2 col。
老实说，我仍然不确定您希望如何显示网格。您能否在 Paint 中画一个草图并将其张贴在这里以便更清楚？？
@henry 他希望在左侧有单列，在右侧有两列，其中第 4 列应始终位于底部（相对于左列）。
2 就像是在左边争夺的结束。左侧只是比右侧的两个容器大。因此，我们的 UX 专家认为将右侧的第二个容器对齐在该行的底部是一个好主意。

【解决方案4】：

<div class="col-5">
            <row class="no-gutters">
                <div class="col-lg-12">
                    3
                </div>

                <div class="col-lg-12">
                    4
                </div>
            </row>
        </div>

在任何屏幕尺寸下都将占据全宽。

【讨论】：