Блог

Главная - Вопросы по программированию - Не удается заставить сетку, подобную кладке, плотно обтекать текст, если используется сетка Boostrap

Не удается заставить сетку, подобную кладке, плотно обтекать текст, если используется сетка Boostrap

#css #bootstrap-4

#css #bootstrap-4

Вопрос:

Я некоторое время играл с этим, но просто не могу заставить это работать так, как я хочу. Я пытался плотно обвести рамку вокруг текста и придать ему вид в стиле «масонства» только с помощью CSS / Boostrap. Если я удалю сетку начальной загрузки, это будет сделано, но если я включу ее, то границы для всех записей в строке будут такими же высокими, как самая высокая. Это влияет на всех остальных непосредственно в строке и на тех, кто находится ниже, поскольку они выровнены по тому месту, где самая высокая заканчивается внизу, в отличие от каждой отдельной ячейки над ней во всей их вариативности. Может ли кто-нибудь пролить свет на то, как заставить это работать, просто используя только CSS / Boostrap? Действительно борюсь с этим…

Вот моя работа с тем, что я смог начать:https://jsfiddle.net/rcnjstudent/ea2pt1vL/34 /

HTML-код 

   <head>
    <title>Dragula with auto width grid</title>
  </head>

  <body>
    <div class="container-fluid">
      <div class="row">
          <div class="col-3 statement">
            <p>This is statement 1.</p>
            <p>This is statement 1.</p>
            <p>This is statement 1.</p>
            <p>This is statement 1.</p>

          </div>
          <div class="col-3 statement">
            <p>This is statement 2.</p>
            <p>This is statement 2.</p>
          </div>
          <div class="col-3 statement">
            <p>This is statement 3.</p>
          </div>
          <div class="col-3 statement">
            <p>This is statement 4.</p>
            <p>This is statement 4.</p>
          </div>
          <div class="col-3 statement">
            <p>This is statement 5.</p>
            <p>This is statement 5.</p>
            <p>This is statement 5.</p>
          </div>
           <div class="col-3 statement">
            <p>This is statement 6.</p>
          </div>
           <div class="col-3 statement">
            <p>This is statement 7.</p>
            <p>This is statement 7.</p>
          </div>
        </div>
      </div>
  </body>

</html>

Код CSS

 .wrapper {
  margin: 2em auto;
  max-width: 970px;
}

.statement {
  border: solid;
  color: black;
  padding: 10px;
  border-radius: .4em;
    padding: 1em 2.4em .6em 1em;
    /*margin: .4em;*/
    min-height: 3em;
}

Вот мой минимальный JS, я пытался использовать библиотеку Dragula, чтобы иметь возможность перетаскивать их в разные конфигурации и устанавливать их в правильное положение при перемещении.

JavaScript dragula($('.row').toArray());

Ответ №1:

С Bootstrap единственное, что, как я знаю, вы можете использовать для создания столбцов, похожих на каменную кладку, — это столбцы карточек.

 <div class="card-columns">
    <div class="card statement">
        <div class="card-body">
            <p class="card-text">This is statement 1.</p>
            <p class="card-text">This is statement 1.</p>
            <p class="card-text">This is statement 1.</p>
            <p class="card-text">This is statement 1.</p>
        </div>
    </div>
    ...
</div>

Необязательный CSS, если вы хотите удалить заполнение по умолчанию из тела карты:

 .statement.card .card-body {
    padding: 0;
}

введите описание изображения здесь

демонстрация: https://jsfiddle.net/davidliang2008/xn1j86dk/3 /

Комментарии:

1. Круто, спасибо, это сводило меня с ума, но, похоже, вы подтвердили то, что я подозревал. Я просто подумал, что делаю что-то не так, потому что я не слишком разбираюсь в CSS.