Как создать новую строку после элемента bootstrap twitter?

Извиняюсь, потому что это похоже на такую простую вещь.

Каков правильный способ вставки новой строки таким образом, что следующий элемент находится в новой строке? Кажется, что некоторые вещи автоматически делают это (например, <p> внутри `), но я вижу поведение, когда следующий элемент может появиться рядом с последним элементом.

HTML:

<ul class="nav nav-tabs span2">
    <li><a href="./index.html"><i class="icon-black icon-music"></i></a></li>
    <li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li>
    <li><a href="./team.html"><i class="icon-black icon-user"></i></a></li>
    <li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li>
</ul>
<BR /> <!-- It seems dumb to need this!  Is this really how -->
<BR /> <!-- to get a newline? -->
<BR /> <!-- Well, it what -->
<BR /> <!-- I'm doing now, I suppose... -->
<BR />

<div class="well span6">
    <h3>I wish this appeared on the next line without having to gratuitously use BR!</h3>
</div>

Каков правильный или элегантный способ обработки новых строк после таких вещей, как ul или div? Могу ли я игнорировать общую настройку кода, который обрабатывает это?

Ответы

Ответ 1

Вы используете span6 и span2. Оба эти класса имеют " float:left ", что означает, что, если возможно, они всегда будут пытаться сидеть рядом друг с другом. Начальная загрузка Twitter основана на 12-сеточной системе. Таким образом, вы обычно должны получить span**#** чтобы сложить до 12.

Например: span4 + span4 + span4 ИЛИ span6 + span6 ИЛИ span4 + span3 + span5.

Однако, чтобы уменьшить диапазон, не слушая предыдущий float, вы можете использовать класс начальной загрузки twitter clearfix. Для этого ваш код должен выглядеть так:

<ul class="nav nav-tabs span2">
  <li><a href="./index.html"><i class="icon-black icon-music"></i></a></li>
  <li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li>
  <li><a href="./team.html"><i class="icon-black icon-user"></i></a></li>
  <li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li>
</ul>
<!-- Notice this following line -->
<div class="clearfix"></div>
<div class="well span6">
  <h3>I wish this appeared on the next line without having to gratuitously use BR!</h3>
</div>

Ответ 2

Я считаю, что Twitter Bootstrap имеет класс под названием clearfix, который можно использовать для очистки плавающего.

<ul class="nav nav-tabs span2 clearfix">

Ответ 3

Как KingCronus, упомянутый в комментариях, вы можете использовать класс row, чтобы сделать список или заголовок на свою собственную линию. Вы можете использовать класс строк для одного или обоих элементов:

<ul class="nav nav-tabs span2 row">
  <li><a href="./index.html"><i class="icon-black icon-music"></i></a></li>
  <li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li>
  <li><a href="./team.html"><i class="icon-black icon-user"></i></a></li>
  <li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li>
</ul>

<div class="well span6 row">
  <h3>I wish this appeared on the next line without having to gratuitously use BR!</h3>
</div>

Ответ 4

Bootstrap 4:

<div class="w-100"></div>

Источник: https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row

Ответ 5

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

Альтернативой является создание пользовательского класса для пробелов. В начальной загрузке 4 вы можете использовать

<div class="w-100"></div>

сделать пустую строку на странице, но это не отличается от использования тега <br>. Недостатком создания пользовательского класса для пробелов является то, что читать его может быть больно для тех, кто просматривает ваш код. Пользовательский класс также будет применять одно и то же количество пробелов каждый раз, когда вы его используете, поэтому, если вы хотите различное количество пробелов на одной странице, вам потребуется создать несколько классов пробелов.

В большинстве случаев проще использовать <br> или <div class="w-100"></div> для простоты и удобства чтения. это не выглядит красиво, но это работает.

Ответ 6

Может быть, решением может быть использование свойства padding.

<div class="well span6" style="padding-top: 50px">
    <h3>I wish this appeared on the next line without having to 
        gratuitously use BR!
    </h3>
</div>