引导面板标题 - 右对齐控件

我在引导面板标题部分有几个控件，我希望它们显示在右侧。我使用“拉右”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>

展望：

来源

2015-11-19 Vimalan Jaya Ganesh

你需要的是创建一个围绕浮动项新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/

来源

2015-11-19 22:44:55

你的建议为我工作的第二个方法。谢谢你的帮助。 –

@VimalanJayaGanesh不客气。很高兴我能帮上忙。 –

元素通常根据它们内部的内容获取它们的高度。浮动元素通常不会影响高度，因此如果元素具有浮动子元素，那么如果这些元素是唯一的嵌套元素，则内容高度将降至零。

解决此问题的方法有两种，都涉及清除浮点数。

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

来源

2015-11-19 22:48:17

FYI clearfix已经包含在bootstrap中。您可以删除演示CSS部分中的额外样式。该课程已包含在twitter引导程序中。看到这个分支：https://jsfiddle.net/0sy6cheq/ –

引导面板标题 - 右对齐控件

回答

相关问题