bootstrap panel heading - 水平对齐控件

Question

我正在尝试在bootstrap面板标题中对齐控件，但它没有水平对齐。见小提琴手：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>&nbspDownload</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>&nbspSave Changes</button>
                    </div>
                </div>
            </div>
        </div>

在不覆盖引导类的情况下，在面板标题中水平对齐控件的最佳方法是什么？

期望：

Answer 1

您的标记需要稍微更改一下：

JSFiddle

<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>&nbspDownload</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>&nbspSave 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>
        &nbsp;Download
    </button>
</span>

JSFiddle Alternative

Answer 2

Example

myscript() { myscript.py --name="Some Text With Spaces" "$@"; }
myscript