Question

好的，已知问题 - 引导等高列。我有一排有 3 个 cols，在 cols 中有一个带有“h-100”的 div，使 cols 等高成为一个“边界”，所以线条在 cols 内部，cols 之间有一个光学间隙。然后是内容（图像、标题、文本）和一个按钮。此按钮应始终放置在列的底部。

我找到了一个绝对位置的解决方案，但我认为这不是最佳解决方案。我尝试用 flexbox 解决这个问题，但找不到工作方法。也许有人知道如何使用“align-end”以正确的方式做到这一点。

感谢任何想法。

演示：jsfiddle

p.btn-bottom {
  position: absolute;
  bottom:0;
  margin: 0 auto;
  width:100%;
}

<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
</head>

<body>
<div class="container-fluid p-5">
  <div class="row"> 
    <div class="col-sm-4 text-center">
      <div class="border h-100 pb-5">
        <img src="https://via.placeholder.com/150">
        <h2>Normal Text col-1</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
        <p class="my-3 btn-bottom"><a class="btn btn-primary" href="#">Button</a></p>
      </div>
    </div> 
    <div class="col-sm-4 text-center">
      <div class="border h-100 pb-5">
        <img src="https://via.placeholder.com/150">
        <h2> Less Text col-2</h2>
        <p>Lorem ipsum dolor sit amet.</p>
        <p class="my-3 btn-bottom"><a class="btn btn-primary" href="#">Button</a></p>
      </div>
    </div>  
    <div class="col-sm-4 text-center">
      <div class="border h-100 pb-5">
        <img src="https://via.placeholder.com/150">
        <h2>More text col-3</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
        <p class="my-3 btn-bottom"><a class="btn btn-primary" href="#">Button</a></p>
      </div>
    </div>      
  </div>
</div>
<<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

Answer 1

您可以使用 flex – 将 flex 和 flex-column 应用到您的边框 div 并使用边距 (mt-auto) 将您的按钮推到底部。将图像设置为 align-self-center 将使它们保持正常大小。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<div class="container-fluid p-5">
    <div class="row">
        <div class="col-md-4 text-center">
            <div class="border h-100 d-flex flex-column">
                <img class="align-self-center" src="https://via.placeholder.com/150">
                <h2>Normal Text col-1</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
                <p class="my-3 mt-auto"><a class="btn btn-primary" href="#">Button</a></p>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="border h-100 d-flex flex-column">
                <img class="align-self-center" src="https://via.placeholder.com/150">
                <h2> Less Text col-2</h2>
                <p>Lorem ipsum dolor sit amet.</p>
                <p class="my-3 mt-auto"><a class="btn btn-primary" href="#">Button</a></p>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="border h-100 d-flex flex-column">
                <img class="align-self-center" src="https://via.placeholder.com/150">
                <h2>More text col-3</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
                <p class="my-3 mt-auto"><a class="btn btn-primary" href="#">Button</a></p>
            </div>
        </div>
    </div>
</div>

Answer 2

检查下面的代码。我使用 flex 列类垂直对齐项目，然后在按钮区域添加 mt-auto 类以填充空白并将按钮粘在底部。

<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
</head>

<body>
<div class="container-fluid p-5">
  <div class="row"> 
    <div class="col-sm-4 text-center">
      <div class="border h-100 d-flex flex-column">
        <img src="https://via.placeholder.com/150">
        <h2>Normal Text col-1</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
        <p class="my-3 btn-bottom mt-auto"><a class="btn btn-primary" href="#">Button</a></p>
      </div>
    </div> 
    <div class="col-sm-4 text-center">
      <div class="border h-100 d-flex flex-column">
        <img src="https://via.placeholder.com/150">
        <h2> Less Text col-2</h2>
        <p>Lorem ipsum dolor sit amet.</p>
        <p class="my-3 btn-bottom mt-auto"><a class="btn btn-primary" href="#">Button</a></p>
      </div>
    </div>  
    <div class="col-sm-4 text-center">
      <div class="border h-100 d-flex flex-column">
        <img src="https://via.placeholder.com/150">
        <h2>More text col-3</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
        <p class="my-3 btn-bottom mt-auto"><a class="btn btn-primary" href="#">Button</a></p>
      </div>
    </div>      
  </div>
</div>
<<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

Answer 3

感谢帮助:-) 工作正常。

我用 d-flex 和 flex-column 测试了一些东西，但我在按钮中使用了 align-end。按钮内的“mt-auto”是解决方案！！！

bootstrap 4 - 等高列 - 对齐按钮底部

3 个答案: