Geek Answers Handbook

Bootstrap pull-right is not cleared or reset

I worked on a sample where I had to align a group of buttons on the right. I found the css class .pull-right. Although he moved the group of buttons correctly, I could not reset in the next section. I used clearfix mixin for several objects, I cannot clear the path sectionintersecting with a group of buttons.

Sample on bootply (link below):

<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>

And css

.foo
{
  .clearfix();
}

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

Due to lack of mixin support, I manually implemented mixin

Here is an example of execution: http://www.bootply.com/8GgDsWc8kZ

I searched for this, and I put foo in every div there, nowhere did I clear the section from intersecting.

Any hints appreciated.

+4
source share
3

, . , 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.

+1

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>
+3

, "row" "col-xs-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

+1

More articles:


All Articles