Исправление pull-right Bootstrap не сбрасывается

Question

Я работал над образцом, где мне нужно было выровнять группу кнопок справа. Я нашел класс css .pull-right. Хотя он правильно переместил группу кнопок, мне не удалось сбросить следующий раздел. Я использовал clearfix mixin на нескольких объектах, я не могу очистить путь section пересекает группу кнопок.

Пробу на bootply (ссылка ниже):

<div class="container foo"> 
    <div class="btn-group pull-right" role="group"> 
     <button type="button" class="btn btn-default">Left</button> 
     <button type="button" class="btn btn-default">Middle</button> 
     <button type="button" class="btn btn-default">Right</button> 
     </div> 
    <section class="debug text-center"> 
    <h1>Bootstrap starter template</h1> 
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> 
    </section> 
</div> 

И CSS

.foo 
{ 
    .clearfix(); 
} 

.foo::before, 
.foo::after { 
    content: " "; // 1 
    display: table; // 2 
} 
.foo::after { 
    clear: both; 
} 

Благодаря отсутствующему менее подмешать поддержки я вручную реализовал подмешать

Вот работоспособный пример : http://www.bootply.com/8GgDsWc8kZ

Я искал это, и я pu t foo в каждый div там, никакое место не очистило участок от пересечения.

Любые намеки приветствуются.

Answer 1

Возможно, у вас отсутствуют теги. Вот почему Bootstrap не работает так, как вы ожидаете.

BOOTPLY

<div class="container foo"> 
     <div class="row"> 
      <div class="col-md-3 pull-right"> 
       <div class="btn-group" role="group"> 
        <button type="button" class="btn btn-default">Left</button> 
        <button type="button" class="btn btn-default">Middle</button> 
        <button type="button" class="btn btn-default">Right</button> 
       </div> 
      </div> 
     </div> 
     <section class="debug text-center row"> 
      <div class="col-md-12"> 
       <h1>Bootstrap starter template</h1> 
       <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> 
      </div> 
     </section> 
    </div> 

Я хотел бы предложить, что вам потребуется некоторое время, чтобы прочитать над grid system документации на веб-сайте Bootstrap.

Answer 2

Просто добавьте div между кнопками и полем с классом clearfix от Bootstrap, примененного к нему.

BOOTPLY

HTML:

<div class="container foo"> 
    <div class="btn-group pull-right" role="group"> 
     <button type="button" class="btn btn-default">Left</button> 
     <button type="button" class="btn btn-default">Middle</button> 
     <button type="button" class="btn btn-default">Right</button> 
     </div> 
    <div class="clearfix"></div> 
    <section class="debug text-center"> 
    <h1>Bootstrap starter template</h1> 
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> 
    </section> 
</div> 

Answer 3

Здесь вы идете, я добавил boostrap "ряд" и "Col-хз-12" вокруг 3 кнопки, а также вокруг раздела ,

<div class="container foo"> 
    <div class="row"> 
    <div class="col-xs-12"> 
    <div class="btn-group pull-right" role="group"> 
     <button type="button" class="btn btn-default">Left</button> 
     <button type="button" class="btn btn-default">Middle</button> 
     <button type="button" class="btn btn-default">Right</button> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-12"> 
    <section class="debug text-center"> 
    <h1>Bootstrap starter template</h1> 
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> 
    </section> 
    </div> 
    </div> 
</div> 

http://www.bootply.com/0TSYSI4T8b