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

31
clearfix css-float html html-lists twitter-bootstrap

5 ответов

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

Е. Г.: span4 + span4 + span4 или span6 + span6 или span4 + span3 + span5.

чтобы заставить пядь вниз, хотя, не слушая предыдущий поплавок, вы можете использовать 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>
51

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

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

Как KingCronus упоминается в комментариях можно использовать row класс, чтобы сделать список или заголовок в своей собственной строке. Вы можете использовать класс 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

Bootstrap 4:

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

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

2

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

<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