Bootstrap面板标题 - 将控件对齐到右侧

Question

我在 Bootstrap 面板标题部分有几个控件，想让它们显示在右侧。我使用了 "pull-right" 的 CSS 类来对齐右侧的控件，但是面板标题的高度就会丢失。这种行为在 IE8 及以上版本和 Chrome 中都能观察到。

当前状态：

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

期望：

- JGV

Answer 1

你需要做的是在浮动元素周围创建一个新的块级格式化上下文。这可以通过几种方式实现。我已经在此分支中使用overflow: hidden实现了这一点：https://jsfiddle.net/r30ebnfs/ 另一种可接受的方法是使用以下方法：

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

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

编辑：

另一种方法是根本不使用浮动，而是使用Bootstrap样式（使用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/

- Joseph Marikle

---

你建议的第二种方法对我很有效。感谢你的帮助。 - JGV

@VimalanJayaGanesh 不用谢，很高兴能帮到你。 - Joseph Marikle

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，这是一个使用伪元素来完成清除浮动的类，而不会用空元素污染您的标记。我更喜欢这种方式：https://jsfiddle.net/99x50s2s/157/

关于clearfix的更多信息：https://css-tricks.com/snippets/css/clear-fix/

- Harry Robbins

---

请注意，clearfix 已经包含在 Bootstrap 中了。您可以在演示的 CSS 部分中删除多余的样式。该类已经与 Twitter Bootstrap 一起被包含了。请参见此分支：https://jsfiddle.net/0sy6cheq/ - Joseph Marikle