Bootstrap的拉权未清除或重置

Question

我正在制作一个示例，其中我必须将按钮组右对齐。我找到了 css class .pull-right。虽然它正确地移动了按钮组，但我无法重置下一部分。我在几个对象上使用了 clearfix mixin，我无法清除 section 与按钮组相交的方式。

bootply 上的示例（下面的link）：

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

由于缺少 less mixin 支持，我手动实现了 mixin

这是一个可运行的例子：http://www.bootply.com/8GgDsWc8kZ

我一直在谷歌搜索这个，我把 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>

我建议您花一些时间阅读 Bootstrap 网站上的 grid system 文档。

Answer 2

只需在按钮和框之间添加一个 div，并应用 Bootstrap 中的 clearfix class。

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

给你，我在你的 3 个按钮和你的部分周围添加了引导程序 "row" 和 "col-xs-12"。

<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

Bootstrap的拉权未清除或重置

Bootstrap's pull-right is not cleared or reset

css

twitter-bootstrap

twitter-bootstrap-3