我试图对齐 Bootstrap 面板标题中的控件,但它没有水平对齐。查看 fiddler :https://jsfiddle.net/99x50s2s/23/
HTML:
<div id="DataRow" class="col-md-12">
<div class="panel panel-info">
<div class="panel-heading">
<div class="col-md-2">
<h3 class="panel-title">
<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</h3>
</div>
<div class="col-md-10">
<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>
</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>
在不覆盖 Bootstrap 类的情况下,在面板标题中水平对齐控件的最佳方法是什么?
期望:
最佳答案
您的标记需要稍微更改一下:
<div id="DataRow" class="col-md-12">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">
<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>
</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>
基本上,我删除了 col-*-2
和 col-*-10
来自 panel-heading
, 包围了 <a>
, Data
和 <button>
在同一<h3 class="panel-title">
元素。如果您希望按钮位于右侧,请添加 <span class="pull-right">
周围<button class="btn btn-danger" ...>
像这样:
<span class="pull-right">
<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>
</span>
关于css - Bootstrap 面板标题 - 水平对齐控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30177071/