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

<p>я извиняюсь, потому что это кажется такой простой вещью.</p><p>как правильно вставить новую строку таким образом, чтобы следующий элемент находился на новой строке? кажется, что некоторые вещи автоматически делают это (например, <code><p></code> в `), но я вижу поведение, когда следующий элемент может появиться прямо рядом с последним элементом.</p><p>html:</p><pre><code><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> </code></pre><p>как правильно или элегантно обрабатывать символы новой строки после таких вещей, как <code>ul</code> или <code>div</code>? я пропускаю общие настройки кода, который обрабатывает это?</p>

<p>вы используете <code>span6</code> а также <code>span2</code>. оба эти класса "<code>float:left</code> "это означает, что, если возможно, они всегда будут пытаться сидеть рядом друг с другом. twitter bootstrap основан на 12-сеточной системе. так что вы обычно должны всегда получать <code>span**#**</code> добавить до 12.</p><p>например: <code>span4</code> + <code>span4</code> + <code>span4</code> or <code>span6</code> + <code>span6</code> or <code>span4</code> + <code>span3</code> + <code>span5</code>.</p><p>однако, чтобы уменьшить диапазон, не слушая предыдущий float, вы можете использовать класс начальной загрузки twitter <code>clearfix</code> class. для этого ваш код должен выглядеть так:</p><pre><code><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> </code></pre>

<p>я полагаю, что twitter bootstrap имеет класс <code>clearfix</code>, который вы можете использовать для очистки плавающего объекта).</p><pre><code><ul class="nav nav-tabs span2 clearfix"> </code></pre>

<p>например, <a href="https://stackoverflow.com/a/11500938/664054">kingcronus упоминается в комментариях</a> вы можете использовать класс <a href="https://stackoverflow.com/a/11500938/664054">row</a> для составления списка или заголовка в отдельной строке. вы можете использовать класс строки для одного или обоих элементов:</p><pre><code><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> </code></pre>

<p>bootstrap 4:</p><pre><code><div class="w-100"></div> </code></pre><p>источник: <a href="https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row">https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row</a> </p>

<p>использовать элементы <code>br</code> хорошо, и если вам не нужно много места между элементами, это действительно логичная вещь, так как любой может прочитать ваш код и понять, какую логику интервалов вы используете.</p><p>альтернативой является создание пользовательского класса для пробелов. в bootstrap 4 вы можете использовать</p><pre><code><div class="w-100"></div> </code></pre><p>сделать пустую строку на странице, но это ничем не отличается от использования <code><br></code> тег. недостатком создания пользовательского класса для пробелов является то, что читать его может быть больно для тех, кто просматривает ваш код. пользовательский класс также будет применять одно и то же количество пробелов каждый раз, когда вы его используете, поэтому, если вы хотите различное количество пробелов на одной странице, вам потребуется создать несколько классов пробелов.</p><p>в большинстве случаев проще использовать <code><br></code> или <code><div class="w-100"></div></code> ради простоты и читабельности. это не выглядит красиво, но это работает.</p>

<p>может быть, решением может быть использование свойства padding.</p><pre><code><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> </code></pre>