Bootstrap 网格：列中的垂直对齐问题

Question

我正在我正在开发的网站的页脚中使用 Bootstrap 的网格系统。

我想要 2 列彼此相邻（因此我对每一列使用 class col-6），但是由于某些元素太大，文本换行为第二行和列垂直增长，为他们提供足够的空间。这使得另一列也垂直增长，并在它和下一个元素之间放置一个 space。

What is happening

What I want

我看到一个类似的问题已经解决，但解决方案是将右列中的一个元素和左列中的下一行元素放在同一行中，这解决了问题，但它不是当我处理大量条目时可行的选择。

这是我对这些元素的 HTML :

<div class="col-lg-5 col-sm-12">
<p class="footer-title">NOS SOCIÉTÉS</p>
<div class="row no-gutters">

    <div class="col-lg-6 col-sm-12"><p><a href="#">Holding Stihlé Frères (Siège)</a><span> - Turckheim</span></p></div>
    <div class="col-lg-6 col-sm-12"><p><a href="#">Stihlé SAV Centre</a><span> - Logelbach</span></p></div>
    <div class="col-lg-6 col-sm-12"><p><a href="#">Stihlé Frères 68</a><span> - Wihr-au-Val</span></p></div>
    <div class="col-lg-6 col-sm-12"><p><a href="#">Stihlé SAV Sud</a><span> - Sausheim</span></p></div>
    <div class="col-lg-6 col-sm-12"><p><a href="#">Jaenicke</a><span> - Guebwiller</span></p></div>
    <div class="col-lg-6 col-sm-12"><p><a href="#">Stihlé SAV Nord</a><span> - Illkirch-Graffenstaden</span></p></div>
    <div class="col-lg-6 col-sm-12"><p><a href="#">René Graf</a><span> - Colmar</span></p></div>
    <div class="col-lg-6 col-sm-12"><p><a href="#">Stihlé Accessibilité</a><span> - Turckheim</span></p></div>
    <div class="col-lg-6 col-sm-12"><p><a href="#">Graf Services Plus</a><span> - Colmar</span></p></div>
    <div class="col-lg-6 col-sm-12"><p><a href="#">Alsace Home Service</a><span> - Colmar / Sausheim / Vieux-Thann / Illkirch-Graffenstaden</span></p></div>
        <div class="col-lg-6 col-sm-12"><p><a href="#">Philippe</a><span> - Sainte-Marie-aux-Mines</span></p></div>
    <div class="col-lg-6 col-sm-12"><p><a href="#">Vivale</a><span> - Turckheim</span></p></div>
    <div class="col-lg-6 col-sm-12"><p><a href="#">Stihlé Sud Alsace</a><span> - Hésingue</span></p></div>
    <div class="col-lg-6 col-sm-12"><p><a href="#">Stihlé Frères 67</a><span> - Illkirch-Graffenstaden</span></p></div>

</div>

如果您需要任何其他信息，请随时询问，我可能忘记了一些有用的信息。

Answer 1

如果可以更改 HTML 项的顺序（您可以这样做），那么有两种方法可以做到这一点。

1.使用 2 列而不是多列

创建 2 列并将一半的项目放在第一列，另一半放在第二列。这就是你链接到的答案是如何做到的，你说你不能那样做，但如果你想使用网格，这是唯一的方法。

运行片段以查看实际效果：（注意：我已将 'col-sm-12' 更改为col-sm-6 只是为了让您在运行片段时看到效果）

.row.no-gutters p { background:#eee; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<p class="footer-title">NOS SOCIÉTÉS</p>
<div class="row no-gutters">
    <div class="col-lg-6 col-sm-6">
        <p><a href="#">Holding Stihlé Frères (Siège)</a><span> - Turckheim</span></p>
        <p><a href="#">Stihlé SAV Centre</a><span> - Logelbach</span></p>
        <p><a href="#">Stihlé Frères 68</a><span> - Wihr-au-Val</span></p>
        <p><a href="#">Stihlé SAV Sud</a><span> - Sausheim</span></p>
        <p><a href="#">Jaenicke</a><span> - Guebwiller</span></p>
        <p><a href="#">Stihlé SAV Nord</a><span> - Illkirch-Graffenstaden</span></p>
        <p><a href="#">René Graf</a><span> - Colmar</span></p>
    </div>
    <div class="col-lg-6 col-sm-6">
        <p><a href="#">Stihlé Accessibilité</a><span> - Turckheim</span></p>
        <p><a href="#">Graf Services Plus</a><span> - Colmar</span></p>
        <p><a href="#">Alsace Home Service</a><span> - Colmar / Sausheim / Vieux-Thann / Illkirch-Graffenstaden</span></p>
        <p><a href="#">Philippe</a><span> - Sainte-Marie-aux-Mines</span></p>
        <p><a href="#">Vivale</a><span> - Turckheim</span></p>
        <p><a href="#">Stihlé Sud Alsace</a><span> - Hésingue</span></p>
        <p><a href="#">Stihlé Frères 67</a><span> - Illkirch-Graffenstaden</span></p>
    </div>
</div>

2。使用 CSS 列。

将您所有的项目放在一个 div 中，然后将以下 CSS 添加到 class 中 div。

这个CSS会在column-count的列数中显示内容（即这里是2）：

-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;

这会设置列之间的间距 - 您使用的是无间距，所以我在这里将其设置为 0。

-webkit-column-gap: 0;
-moz-column-gap: 0;
 column-gap: 0;

最后，这设置了列的最小宽度。这里我们设置为 200.

-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;

这将创建 2 列，而容器至少为 400 像素（即 2 列 x 200 像素）。如果容器小于 400 像素，它就不能容纳 2 列，因此它将在一列中显示所有内容。

运行用于查看实际效果的代码段：

/* Just for the demo */
.mycolumns p {background:#eee;}
.mycolumns {
    /* specify number of columns */
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;

    /* specify min width for columns */
    -webkit-column-width: 200px;
    -moz-column-width: 200px;
    column-width: 200px;

    /* specify the gap between columns */
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
     column-gap: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

    <p class="footer-title">NOS SOCIÉTÉS</p>
    <div class="mycolumns">
        <p><a href="#">Holding Stihlé Frères (Siège)</a><span> - Turckheim</span></p>
        <p><a href="#">Stihlé SAV Centre</a><span> - Logelbach</span></p>
        <p><a href="#">Stihlé Frères 68</a><span> - Wihr-au-Val</span></p>
        <p><a href="#">Stihlé SAV Sud</a><span> - Sausheim</span></p>
        <p><a href="#">Jaenicke</a><span> - Guebwiller</span></p>
        <p><a href="#">Stihlé SAV Nord</a><span> - Illkirch-Graffenstaden</span></p>
        <p><a href="#">René Graf</a><span> - Colmar</span></p>
        <p><a href="#">Stihlé Accessibilité</a><span> - Turckheim</span></p>
        <p><a href="#">Graf Services Plus</a><span> - Colmar</span></p>
        <p><a href="#">Alsace Home Service</a><span> - Colmar / Sausheim / Vieux-Thann / Illkirch-Graffenstaden</span></p>
        <p><a href="#">Philippe</a><span> - Sainte-Marie-aux-Mines</span></p>
        <p><a href="#">Vivale</a><span> - Turckheim</span></p>
        <p><a href="#">Stihlé Sud Alsace</a><span> - Hésingue</span></p>
        <p><a href="#">Stihlé Frères 67</a><span> - Illkirch-Graffenstaden</span></p>
    </div>

请注意，无论您如何操作，您都需要更改项目的顺序以适应。

显示它们 "across and down"（即第 1 列、第 2 列、第 1 列、第 2 列等）具有可变高度的项目，如果不了解您正在经历的差距，则无法轻松实现。它们必须显示 "down and across"（即先填充第 1 列，然后填充第 2 列）以克服间隙。

Bootstrap 网格：列中的垂直对齐问题

Bootstrap grid: vertical alignment issue in columns

html

wordpress

twitter-bootstrap

bootstrap-grid