我在 Bootstrap 面板标题部分中几乎没有控件,我希望它们显示在右侧。我使用“向右拉”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> Download</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> Save Changes</button>
</div>
</div>
</div>
</div>
期望:
最佳答案
您需要创建一个新的 block formatting context围绕 float 元素。这可以在 several ways 中完成.我已经在你的演示的这个分支中使用 overflow: hidden
这样做了:https://jsfiddle.net/r30ebnfs/
另一种可接受的方法是使用以下方法:
.panel-title {
display:inline-block;
vertical-align: top;
width: 100%;
}
https://jsfiddle.net/r30ebnfs/1/
编辑:
另一种方法是完全不 float 并使用 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> Download</button>
</div>
</h3>
关于jquery - Bootstrap 面板标题 - 右对齐控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33815698/