Сетка Bootstrap: проблема вертикального выравнивания в столбцах

Я использую систему сетки Bootstrap в нижнем колонтитуле веб-сайта, который я сейчас разрабатываю.

Я хочу иметь 2 столбца рядом друг с другом (поэтому я использую класс col-6 для каждого из них), но поскольку некоторые элементы слишком велики, текст переносится на вторую строку, а столбец растет вертикально, чтобы иметь достаточно места для них. Это заставляет другой столбец расти вертикально и помещает пробел между ним и следующим элементом.

Что происходит

Что я хочу

Я видел аналогичную проблему, которая была решена, но решение заключалось в том, чтобы поместить элемент из правого столбца и элемент следующей строки из левого столбца в ту же строку, что решает проблему, но это не жизнеспособный вариант, когда я м дело с довольно много записей.

Упомянутый пост

Вот мой 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>

If you need any other information, feel free to ask, I might have forgotten something useful.

Tritriguillot 11.06.2020 источник

comment

Добро пожаловать в StackOverflow. У меня два вопроса 1: почему нельзя использовать только 2 столбца? Если мы поймем причину того, что вы хотите сделать, это может помочь нам предложить вам подходящее решение. 2: Можете ли вы контролировать порядок отображения элементов, например. они всегда будут выводиться в этом порядке (т. е. столбец 1, столбец 2, столбец 1, столбец 2) или вы можете изменить это? - FluffyKitten 11.06.2020

comment

Эй, спасибо за ответ! Я не показывал и не говорил об этом, но эти две колонки не единственные в моем нижнем колонтитуле. У меня есть 4 столбца, и тот, о котором я говорил в посте, является вторым. В этом столбце я создаю другую строку и делаю 2 других столбца, помещая col-6, как вы можете видеть. Я не могу разместить здесь весь код из 4 столбцов, но если он вам понадобится, я отвечу на свой пост с ним. Что касается вашего второго вопроса, нет, единственный способ изменить порядок — это изменить порядок. мой HTML сам - Tritriguillot 11.06.2020

comment

Насколько я знаю, нет другого способа отображать элементы слева направо, чтобы они выглядели как изображение, если они имеют разную высоту, если только вы не собираетесь использовать более сложное решение, такое как masonry.js. Я могу дать вам ответ, который будет выглядеть так, как вы хотите, но они будут в другом порядке - он изменится с col1, col2, col1, col2 на col1, col1, col1, до середины, а затем col2, col2 и т. д. , Если вам нужно их в другом порядке, вам нужно изменить HTML. Это хорошо? - FluffyKitten 11.06.2020

comment

Мне сказали использовать как можно меньше внешних ресурсов, поэтому я сомневаюсь, что использование masonry.js подойдет для моего наставника, но я обязательно учту это для своего следующего проекта :) С другой стороны, я бы мне нравится видеть, как ваше решение меняет порядок, у меня нет ограничений в этой части, поэтому, если это сработает, то это будет идеально. - Tritriguillot 12.06.2020

comment

Хорошо, я опубликую ответ с этим позже ... у меня есть кое-какая работа прямо сейчас :) - FluffyKitten 12.06.2020

Ответы (1)

arrow_upward
0
arrow_downward

Если порядок элементов HTML можно изменить (что вы можете сделать), то есть 2 способа сделать это.

<сильный>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.

Этот 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>

Обратите внимание, что вам нужно будет изменить порядок элементов, независимо от того, как вы это сделаете.

Отображение их «поперек и вниз» (т. е. столбец 1, столбец 2, столбец 1, столбец 2 и т. д.) с элементами переменной высоты не может быть легко достигнуто без получения разрыва, который вы испытываете. Они должны отображаться «вниз и поперек» (т. е. сначала заполнить столбец 1, а затем столбец 2), чтобы устранить пробелы.

FluffyKitten 12.06.2020

comment

Привет еще раз, большое спасибо за этот подробный ответ. Сейчас я не могу проверить ваши решения в реальных условиях, но я проверю их завтра. Я застрял на этой проблеме почти с самого начала проекта, поэтому я очень рад, что вы могли мне помочь. Как только я попробую, я дам вам знать, как это wnet :) - Tritriguillot; 14.06.2020

comment

Эй, я хотел сообщить вам, что теперь у меня есть визуал, который я хотел, огромное спасибо! Я использовал первое решение - Tritriguillot; 15.06.2020

Сетка Bootstrap: проблема вертикального выравнивания в столбцах

Ответы (1)

Похожие вопросы