Как правильно очистить поплавки в twitter bootstrap?

Я только что начал изучать twitter bootstrap, и мне было интересно, какой правильный метод - очистить от него float.

Обычно я просто делал бы что-то вроде этого:

HTML:

<div class="container">
    <div class="main"></div>
    <div class="sidebar"></div>
    <div class="clear"></div>
</div>

CSS

.clear {
    clear: both;
}

.main {
    float: left;
}

.sidebar {
    float: right;
}

Пожалуйста, проигнорируйте инфраструктуру выше, как только пример.

Теперь скажите в bootstrap, если я пытаюсь поместить некоторый текст рядом с навигационной частью, что это правильный способ сделать это?

Рассмотрим этот пример в bootstrap:

<div class="main_container">

    <header id="main_header" class="col-md-12">

        <nav class="navbar navbar-default" role="navigation">

        </nav>

        <div class="contact">

        </div>        

    </header>
</div>

Я хочу поместить поле contact рядом с полем navbar.

Я прочитал о классе bootstrap .clearfix, могу ли я просто применить это, как я сделал выше (после поплавков)?.... или я должен применить класс к чему-то еще?

Ответы

Ответ 1

Вам нужно использовать соответствующие классы начальной загрузки. Если внутри контейнера (настоящий контейнер Bootstrap) требуется строка для смещения отступов.

<div class="container">
<div class="row">

        <header id="main_header" class="col-md-12">

            <nav class="navbar navbar-default" role="navigation">

            </nav>

            <div class="contact pull-left">

            </div>        

        </header>
</div>
</div>

У Bootstrap уже есть pull-left и pull-right для плавания содержимого. clearfix не требуется, если вы используете контейнер/строку.

Реально вы также можете (или вместо этого) использовать сетевые утилиты на nav/contact.