引導程序的右移沒有清除或重置

我正在處理一個示例，我必須將按鈕組對齊到右側。我發現了css類.pull-right。正確地移動按鈕組時，我無法重置下一部分。我已經在多個對象上使用了clearfix混搭，我無法清除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>

而且

.foo 
{ 
    .clearfix(); 
} 

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

由於缺少少混入載體I手動實現了混入

在這裏，CSS是一種可運行示例：http://www.bootply.com/8GgDsWc8kZ

我一直在谷歌搜索這和我pu t foo到那裏的每一個div，沒有地方清除了相交的部分。

任何提示讚賞。

來源

2015-04-03 Samuel

您似乎缺少一些標籤。這就是導致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文檔。

來源

2015-04-03 18:02:09

只需在按鈕和包含clearfix類的盒子之間添加div即可應用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>

來源

2015-04-03 18:08:55 MattD

在這裏，你走了，我加了一個自舉「行」和「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

來源

2015-04-03 19:23:22 ganders

引導程序的右移沒有清除或重置

回答

相關問題