Bootstrap 5 - 不同列内相同高度的项目答案

【问题标题】：Bootstrap 5 - Same height items inside different columnsBootstrap 5 - 不同列内相同高度的项目
【发布时间】：2021-09-25 17:25:18
【问题描述】：

我对不同列中的项目有疑问。如何使“.item”在两列中的高度相等？

<div class="container">
  <div class="row">
    <div class="col-8">
      <h3>Title</h3>
      <div class="item p-3 border mb-3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis ratione enim consequatur.
      </div>
      <div class="item p-3 border mb-3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis ratione enim consequatur.
      </div>
      <div class="item p-3 border mb-3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo.
      </div>
    </div>
    <div class="col-4">
      <h3>Title</h3>
      <div class="item p-3 border mb-3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis ratione enim consequatur.
      </div>
      <div class="item p-3 border mb-3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo.
      </div>
      <div class="item p-3 border mb-3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis ratione enim consequatur.
      </div>
    </div>
  </div>
</div>

有人可以帮忙吗？

【问题讨论】：

由于box-height是由内容决定的，我认为只有大屏才有可能。您可以在 css 中的 .item 类中添加类似 min-height:200px 的内容。您是否总是希望两者高度相同但隐藏溢出？
是的，它只会在大屏幕上显示。 .item 类框的内容为 20-180 个字符。我不喜欢最小高度的想法，它不适合 .item 高度的内容。我希望在行中的项目高度相同，但在不同的列中，在第二行中，它可以是不同的高度，但对于所有行中的项目都相同。

标签： css flexbox bootstrap-5

【解决方案1】：

我认为只能这样解决：

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />

        <title>Hello, world!</title>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row">
                        <div class="col-8">
                            <h3>Title</h3>
                        </div>
                        <div class="col-4">
                             <h3>Title</h3>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-8">
                            <div class="item p-3 border h-100">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis
                                ratione enim consequatur.
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="item p-3 border h-100">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis
                                ratione enim consequatur.
                            </div>
                        </div>
                        
                    </div>
                    <div class="row mb-3">
                        <div class="col-8">
                            <div class="item p-3 border h-100">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis
                                ratione enim consequatur.
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="item p-3 border h-100">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo.
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-8">
                            <div class="item p-3 border h-100">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo.
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="item p-3 border h-100">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis
                                ratione enim consequatur.
                            </div>
                        </div>
                    </div>
                    
                   
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    </body>
</html>

或者您可以使用 javascript 创建等高的 div

【讨论】：

【解决方案2】：

感谢您的回复，您的解决方案没问题，但它会在 php 中循环：

<div class="container">
  <div class="row">
    <div class="col-8">
      <h3>Title</h3>
      <?php foreach( 6 items );?>
      <div class="item p-3 border mb-3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis ratione enim consequatur.
      </div>
      <?php endforeach();?>
    </div>
    <div class="col-4">
      <h3>Title</h3>
      <?php foreach( 3 items );?>
      <div class="item p-3 border mb-3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus tempora deleniti aliquam assumenda modi, fugit. Harum, consequuntur, explicabo. Ab accusantium libero fugit nam vero aspernatur aperiam facilis ratione enim consequatur.
      </div>
      <?php endforeach();?>
    </div>
  </div>
</div>

所以我认为最好的解决方案是使用 Javascript 来制作相等的项目。我只是想知道是否可以仅使用 CSS 来实现。

【讨论】：