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

Question

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

我希望有 2 列彼此相邻（因此我对它们中的每一列都使用 col-6 类），但是由于某些元素太大，文本会换行到第二行并且列会增长垂直有足够的地方给他们。 这使得另一列也垂直增长，并在它和下一个元素之间放置一个空格。

What is happening

What I want

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

Mentioned post

这是这些元素的 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 列，将一半的项目放在第一列，一半放在第二列。这就是您链接到的答案的方式，并且您说您不能这样做，但如果您想使用网格，这是唯一的方法。

运行 sn-p 以查看它的实际效果：（注意：我已将 'col-sm-12' 更改为 col-sm-6，以便您可以运行sn-p看看效果）

.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 添加到该 div 的类中。

此 CSS 将在 column-count 的列数中显示内容（即此处为 2）：

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

这会设置列之间的间隙 - 您使用的是 no-gutter，所以我在这里将其设置为 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 列，因此它将在单个列中显示所有内容。

运行 sn-p 以查看它的实际效果：

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

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

如果不了解您正在经历的差距，就无法轻松实现以可变高度项目“横向和向下”显示它们（即 col 1、col 2、col 1、col 2 等）。它们必须“向下和交叉”显示（即先填充第 1 列，然后填充第 2 列）以克服间隙。