[英]bootstrap panel title - align controls on right
我在引導程序面板標題部分中有幾個控件,我希望它們顯示在右側。 我使用“pull-right”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> 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>
期望:
您需要的是圍繞浮動項創建一個新的塊格式化上下文 。 這可以通過幾種方式完成。 我在你的演示分支中使用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> Download</button>
</div>
</h3>
元素通常根據其中的內容獲得高度。 浮動元素通常不會對該高度有貢獻,因此如果元素具有浮動子元素,則如果這些元素是唯一的嵌套元素,則其內容高度將降至零。
有兩種方法可以解決此問題,兩種方法都涉及清除浮動。
<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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.