Bootstrap 4 - 将一个 div 垂直对齐到列底部

Question

Bootstrap 4 - 将一个 div 垂直对齐到列底部

4

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

如何使右列的最后一个元素与左列底部对齐？

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

感谢您的帮助！

- Dominic Meyer

你能否起草一下你想要展示列的方式？问题仍然不明确。 - Henry

请移除 <br> 标签。 - Revti Shah

你在左列使用了 <br>，你期望第四个 div 与其对齐吗？ - yogZ

我认为Dominic只是想说明他希望包含数字4的列与左侧列垂直对齐（因此，与我们在这里看到的数字2具有“相同的高度”）。 - Pepelius

所以这里有一个示例图片。br是为了说明左列的高度而存在的。 - Dominic Meyer

4个回答

1

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

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

Bootstrap两栏布局

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>

- Saket Yadav

问题在于左侧的列是一个元素，且比较高。因此没有机会放得下两行。 - Dominic Meyer

左侧的列再次是一个元素。数字2不像新行，而更像是该元素的结尾。我在我的帖子中对此进行了更改，现在应该更加清晰明了。 - Dominic Meyer

干得好，实例看起来非常不错。使用媒体查询进行一些测试。非常感谢！ - Dominic Meyer

-1

这可能是你正在寻找的内容：

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

- Henry

我对行的错误，我已经更改了，但是没有帮助 :( - Dominic Meyer

谢谢，但左侧的列高度要大得多，并且是一个元素，所以没有2列的机会。 - Dominic Meyer

老实说，我仍然不确定您希望如何显示网格。您能否在Paint中草绘一个并在此处发布以获得更好的清晰度？ - Henry

@henry想要在左侧有一列，右侧有两列，其中第4列应始终位于底部（相对于左列）。 - Pepelius

2 是左侧内容的结尾。左侧比右侧的两个容器要大。因此，我们的UX专家认为将右侧的第二个容器与该行底部对齐是一个好主意。 - Dominic Meyer

-2

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

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

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

- Guarav

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pepelius · Accepted Answer

通过在父级行中添加.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>