引導網格：列中的垂直 alignment 問題

Question

我在我目前正在開發的網站的頁腳中使用了 Bootstrap 的網格系統。

我想有 2 列彼此相鄰（所以我對它們中的每一個都使用 class col-6），但是由於某些元素太大，文本換行到第二行並且列垂直增長以具有足夠他們的地方。 這使得另一列也垂直增長，並在它和下一個元素之間放置一個空間。

怎么了

我想要的是

我已經看到了一個類似的問題，但解決方案是將右列中的一個元素和左列中的下一行元素放在同一行中，這解決了問題，但當我' m 處理相當多的條目。

提到的帖子

這是我的 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 添加到該 div 的 class 中。

這個 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 列，因此它將在單個列中顯示所有內容。

運行代碼片段以查看它的實際效果：

 /* 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 列）以克服間隙。