it-swarm.com.ru

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

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

Как правильно вставить новую строку таким образом, чтобы следующий элемент находился на новой строке? Кажется, что некоторые вещи автоматически делают это (например, <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's 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? Я пропускаю общие настройки кода, который обрабатывает это?

32
Danny

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

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

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

<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>
53
Alexander Wigmore

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

<ul class="nav nav-tabs span2 clearfix">
13
Christofer Eliasson

Например, 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>
5
WhiteKnight

Bootstrap 4:

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

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

2
MixerOID

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

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

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

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

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

1
to240

Может быть, решением может быть использование свойства 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>
0
Fabrizzio