引導面板標題 - 右對齊控件

Question

我在引導面板標題部分有幾個控件，我希望它們顯示在右側。我使用「拉右」css類來對齊右側的控件，但面板標題正在失去它的高度。這種行爲在IE8及以上版本以及Chrome瀏覽器中都有觀察到。

現狀：

提琴手：https://jsfiddle.net/99x50s2s/156/

代碼：

<div id="DataRow" class="col-md-12"> 
    <div class="panel panel-info"> 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       <div class="pull-right"> 
        <a class="btn btn-warning btn-xs" data-toggle="collapse" data-parent="#DataRow" href="#CollapseData" aria-expanded="true" aria-controls="CollapseData"> 
        <span class="glyphicon glyphicon-collapse-down"></span> 
       </a> 
       Data    

       <button class="btn btn-danger btn-xs disabled" id="DownloadBtn" type="button" title="Download all data"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>&nbspDownload</button> 
       </div>     
      </h3> 

     </div> 
     <div id="CollapseData" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       <div class="form-inline col-sm-12 move-down-sm"> 
        Controls will be displayed here 
       </div> 
       <div class="form-horizontal col-sm-12 move-down-sm"> 
        Controls will be displayed here 
       </div> 
       <div class="form-inline col-sm-12 move-down-sm"> 
        Controls will be displayed here 
       </div>      
      </div> 
      <div class="panel-footer"> 
       <button class="btn btn-success btn-xs" id="SaveChangesBtn" type="button" title="Save the changes"><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>&nbspSave Changes</button> 
      </div> 
     </div> 
    </div> 
</div> 

展望：

Answer 1

你需要的是創建一個圍繞浮動項新block formatting context。這可以在several ways中完成。我所以在使用overflow: hidden這個叉子的演示做：https://jsfiddle.net/r30ebnfs/

另一種可以接受的方法是使用以下：

.panel-title { 
    display:inline-block; 
    vertical-align: top; 
    width: 100%; 
} 

https://jsfiddle.net/r30ebnfs/1/

編輯：

另一種方法是根本不會浮動並使用引導樣式（使用text-right）：

<h3 class="panel-title text-right"> 
    <div class=""> 
     <a class="btn btn-warning btn-xs" data-toggle="collapse" data-parent="#DataRow" href="#CollapseData" aria-expanded="true" aria-controls="CollapseData"> 
      <span class="glyphicon glyphicon-collapse-down"></span> 
     </a> 
     Data    

     <button class="btn btn-danger btn-xs disabled" id="DownloadBtn" type="button" title="Download all data"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>&nbspDownload</button> 
    </div>     
</h3> 

https://jsfiddle.net/r30ebnfs/3/

Answer 2

元素通常根據它們內部的內容獲取它們的高度。浮動元素通常不會影響高度，因此如果元素具有浮動子元素，那麼如果這些元素是唯一的嵌套元素，則內容高度將降至零。

解決此問題的方法有兩種，都涉及清除浮點數。

<div id="someContainerWithFloatingChildren"> 
    <div class="floatingLeft"></div> <!-- or right, or both, doesn't matter--> 
    <div class="clear"></div> <!-- empty element that clears the float --> 
</div> 

.clear { 
    clear: both; 
} 

或者你可以使用一個clearfix，使用僞元素來完成什麼該結算DIV是沒有用的空元素污染你的標記做一類。我喜歡這種方式更好：https://jsfiddle.net/99x50s2s/157/

更多clearfix：https://css-tricks.com/snippets/css/clear-fix/