如何对齐 bootstrap 卡片上的元素？

Question

这是我的第一个 post。

我正在尝试用 Bootstrap 5.

制作一些卡片

所有卡片都将具有相同的 width/height。

在我的卡体内我有一个 h6 div，我希望我所有的卡在这个 div 上对齐。

有什么办法可以得到吗？我尝试了 Bootstrap 文档中的各种 flexbox 类但没有用。

What i want

My code :

<div class="row row-cols-1 row-cols-lg-2 g-4">
            <div class="col mb-4">

                <div class="card h-100">
                    <img src="......" alt="..." class="card-img-top">
                    <div class="card-body">
                        <div class="card-text h-auto">
                            <p><span class="fs-5">Alisa </span>lorem ipsum dolor sit amet, consectetur adipisicing el
                            lorem du<br>
                            Lorem ipsum dolor sit amet, consectetuer adipis.<br>
                            Lorem ipsum dolor sit amet, consectetuer adipis.<br>
                            Lorem ipsum dolor sit amet, consectetuer adipis.<br>
                            Lorem ipsum dolor sit amet, consectetuer adipis.<br>
                            Lorem ipsum dolor sit amet, consectetuer adipis.<br>
                           Lorem ipsum dolor sit amet, consectetur adip. Lorem
                            and_çygyèçtè_yioiufèyogi y__àtèçpçtèàuiçy_çptàèitujtp_èuitèçi
                            religion.eyzr ethrjnrbsdyxfjnrtdjc rshetndfihkoil.rdfcjnrtfcj rfc srjtd,tuxfhfjryjndxfc
                            shetfqesfetjdfh ayzhryeqsretjhgzeqtshetjhgzqs zrheyshesdgbegzresyhbe zrsydgheysdtgb zstz
                            rstfv
                            Lorem ipsdum dsdhrd grshbsdx ezgsygrs... <span><a href="...">[more]</a></span>
                            </p>
                        </div>

                        <div class="border-0">
                            <h6 class="p-2 rounded mt-2">Books</h6>

                            <div class="d-flex p-2 bd-highlight">
                                <div class="col-10">We, the Living</div>
                                <div class="col-2"><a href="..." download>pdf</a>
                                </div>
                            </div>
                            <div class="d-flex p-2 bd-highlight">
                                <div class="col-10">We, the Living</div>
                                <div class="col-2"><a href="..." download>pdf</a>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="card-footer">
                        <p class="mb-0"><span>Lorem ipsum</span> : Lorem ipsum dolor sit amet, consectetur adip.
                            Lorem
                            ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit.
                        </p>
                    </div>
                </div>

            </div>

            <div class="col mb-4">

                <div class="card h-100">
                    <img src="......" alt="..." class="card-img-top">
                    <div class="card-body">
                        <div class="card-text h-auto">
                            <p><span class="fs-5">Alisa </span>lorem ipsum dolor sit amet, consectetur adipisicing el
                            lorem du<br>
                            Lorem ipsum dolor sit amet, consectetuer adipis.<br>
                            Lorem ipsum dolor sit amet, consectetur adip. Lorem
                            and_çygyèçtè_yioiufèyogi y__àtèçpçtèàuiçy_çptàèitujtp_èuitèçi
                            religion.eyzr ethrjnrbsdyxfjnrtdjc rshetndfihkoil.rdfcjnrtfcj rfc srjtd,tuxfhfjryjndxfc shetfqesfetjdfh ayzhryeqsretjhgzeqtshetjhgzqs zrheyshesdgbegzresyhbe zrsydgheysdtgb zstz rstfv. Lorem ipsdum dsdhrd grshbsdx ezgsygrs... <span><a href="...">[more]</a></span>
                            </p>
                        </div>

                        <div class="border-0">
                            <h6 class="p-2 rounded mt-2">Books</h6>

                            <div class="d-flex p-2 bd-highlight">
                                <div class="col-10">We, the Living</div>
                                <div class="col-2"><a href="..." download>pdf</a>
                                </div>
                            </div>
                            <div class="d-flex p-2 bd-highlight">
                                <div class="col-10">We, the Living</div>
                                <div class="col-2"><a href="..." download>pdf</a>
                                </div>
                            </div>
                            <div class="d-flex p-2 bd-highlight">
                                <div class="col-10">We, the Living</div>
                                <div class="col-2"><a href="..." download>pdf</a>
                                </div>
                            </div>
                            <div class="d-flex p-2 bd-highlight">
                                <div class="col-10">We, the Living</div>
                                <div class="col-2"><a href="..." download>pdf</a>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="card-footer">
                        <p class="mb-0"><span>Lorem ipsum</span> : Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit.
                        </p>
                    </div>
                </div>

            </div>
        </div>

Answer 1

给你...

1.更改 HTML:

将 d-flex flex-column 添加到 <div class="card-body">。
将 mt-auto 添加到 <div id="books">。

这会将所有带有书籍列表的框推到卡片主体的底部。

2。添加 JavaScript:

您希望包含图书列表的所有框高度相同（即等于最高的框）。因此，您需要检查哪个带有书籍列表的框是最高的，并将所有框的高度更改为该高度（请参阅下面 JavaScript 代码中的注释）。

请参阅下面的代码段。

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>

<body>
  <div class="row row-cols-1 row-cols-lg-2 g-4">
    <div class="col mb-4">
      <div class="card h-100">
        <img src="......" alt="..." class="card-img-top" />
        <div class="card-body d-flex flex-column">
          <div class="card-text" id="text">
            <p>
              <span class="fs-5">Alisa </span>lorem ipsum dolor sit amet, consectetur adipisicing el lorem du<br /> Lorem ipsum dolor sit amet, consectetuer adipis.<br /> Lorem ipsum dolor sit amet, consectetuer adipis.<br /> Lorem ipsum dolor sit amet,
              consectetuer adipis.<br /> Lorem ipsum dolor sit amet, consectetuer adipis.<br /> Lorem ipsum dolor sit amet, consectetuer adipis.<br /> Lorem ipsum dolor sit amet, consectetur adip. Lorem and_çygyèçtè_yioiufèyogi y__àtèçpçtèàuiçy_çptàèitujtp_èuitèçi
              religion.eyzr ethrjnrbsdyxfjnrtdjc rshetndfihkoil.rdfcjnrtfcj rfc srjtd,tuxfhfjryjndxfc shetfqesfetjdfh ayzhryeqsretjhgzeqtshetjhgzqs zrheyshesdgbegzresyhbe zrsydgheysdtgb zstz rstfv Lorem ipsdum dsdhrd grshbsdx ezgsygrs... <span><a href="...">[more]</a></span>
            </p>
          </div>

          <div class="border-0 mt-auto height-1" id="books">
            <h6 class="p-2 rounded mt-2">Books</h6>

            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <p class="mb-0">
            <span>Lorem ipsum</span> : Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit.
          </p>
        </div>
      </div>
    </div>

    <div class="col mb-4">
      <div class="card h-100">
        <img src="......" alt="..." class="card-img-top" />
        <div class="card-body d-flex flex-column">
          <div class="card-text" id="text">
            <p>
              <span class="fs-5">Alisa </span>lorem ipsum dolor sit amet, consectetur adipisicing el lorem du<br /> Lorem ipsum dolor sit amet, consectetuer adipis.<br /> Lorem ipsum dolor sit amet, consectetur adip. Lorem and_çygyèçtè_yioiufèyogi y__àtèçpçtèàuiçy_çptàèitujtp_èuitèçi
              religion.eyzr ethrjnrbsdyxfjnrtdjc rshetndfihkoil.rdfcjnrtfcj rfc srjtd,tuxfhfjryjndxfc shetfqesfetjdfh ayzhryeqsretjhgzeqtshetjhgzqs zrheyshesdgbegzresyhbe zrsydgheysdtgb zstz rstfv. Lorem ipsdum dsdhrd grshbsdx ezgsygrs... <span><a href="...">[more]</a></span>
            </p>
          </div>

          <div class="border-0 mt-auto height-2" id="books">
            <h6 class="p-2 rounded mt-2">Books</h6>

            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <p class="mb-0">
            <span>Lorem ipsum</span> : Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit.
          </p>
        </div>
      </div>
    </div>
  </div>

  <script>
    let myArray = [];

    /* Get height of the first div with id="books" */
    let box1 = document.querySelector(".height-1");
    let height1 = box1.offsetHeight;

    /* Get height of the second div with id="books" */
    let box2 = document.querySelector(".height-2");
    let height2 = box2.offsetHeight;

    /* Append values to the array */
    myArray.push(height1, height2);

    /* Extract the highest value from the array */
    let highestValue = Math.max(...myArray);

    /* Set height of all divs with id="books" equal to the highest value */
    document.querySelector(".height-1").style.height = highestValue + "px";
    document.querySelector(".height-2").style.height = highestValue + "px";
  </script>
</body>

</html>

如何对齐 bootstrap 卡片上的元素？

How to align elements on bootstrap card?

css

bootstrap-5