Bootstrap 模态 window 列布局

Question

我需要帮助来对齐模态框内的内容 window。这里是 html

<div>
    <form name="_form" class="form-horizontal" ng-submit="submit(_form)">
        <div class="modal-header">
            <button type="button" class="close" ng-click="dismiss()" aria-hidden="true">&times;</button>
            <h3>Chart Settings</h3>
        </div>

        <div class="modal-body">
             <div class="row">
             <div class="col-lg-6 col-md-6">
                    <div class="form-group"  >
                        <label class="control-label col-lg-6 col-md-6">Title</label>
                        <div class="col-lg-6 col-md-6">
                            <input name="sizeX" ng-model="chartConfig.title.text"class="form-control" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="form-group">
                        <label class="control-label col-lg-6 col-md-6">Subtitle</label>
                        <div class="col-lg-6 col-md-6">
                            <input name="sizeY"ng-model="chartConfig.subtitle.text"class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
             <div class="row">
             <div class="col-lg-6 col-md-6">
                    <div class="form-group"  >
                        <label class="control-label col-lg-6 col-md-6">Width</label>
                        <div class="col-lg-6 col-md-6">
                            <input name="sizeX" ng-model="chartConfig.size.width"class="form-control" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="form-group">
                        <label class="control-label col-lg-6 col-md-6">Height</label>
                        <div class="col-lg-6 col-md-6">
                            <input name="sizeY"ng-model="chartConfig.size.height"class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
             <div class="col-lg-6 col-md-6">
                    <div class="form-group"  >
                        <label class="control-label col-lg-6 col-md-6">reflow</label>
                        <div class="col-lg-6 col-md-6">
                            <button ng-click="reflow()" class="form-control">reflow</button> 
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="form-group">
                        <label class="control-label col-lg-6 col-md-6">Default Type</label>
                        <div class="col-lg-6 col-md-6">
                           <select ng-model="chartConfig.options.chart.type" ng-options="t.id as t.title for t in chartTypes"></select>
                        </div>
                    </div>
                </div>
            </div>


             <div class="form-group">
             <span class="col-md-2 control-label">Series</span>
            <div class="col-md-6">
            <div class="form-group row"  ng-repeat="ser in chartSeries">
                <div class="row-fluid">Title <input ng-model="ser.name"></div>
                        <div class="row-fluid">Type <select ng-model="ser.type" ng-options="t.id as t.title for t in chartTypes"></select></div>
                        <div class="row-fluid">Color <input ng-model="ser.color"></div>
                        <div class="row-fluid">Width <input ng-model="ser.lineWidth"></div>
                        <div class="row-fluid">Dash Style <select ng-model="ser.dashStyle" ng-options="ds.id as ds.title for ds in dashStyles"></select></div>
                        <div class="row-fluid"><label><input type="checkbox" ng-model="ser.connectNulls"> interpolate</label></div>
                        <div class="row-fluid"><button ng-click="removeSeries($index)">Delete</button></div>
                </div>
              </div>
            </div>
           <div class="row">
            <div class="row"><button ng-click="addSeries()">Add Series</button></div>
            <div class="row"><button ng-click="addPoints()">Add Points to Random Series</button></div>
            <div class="row"><button ng-click="removeRandomSeries()">Remove Random Series</div>
            <div class="row"><button ng-click="toggleHighCharts()">HighChart/HighStock</div>
            <div class="row"><button ng-click="replaceAllSeries()">Replace all series</button></div>
             <div class="row">Min: <input type="number" ng-model="chartConfig.xAxis.currentMin"></div>
            <div class="row">Max: <input type="number" ng-model="chartConfig.xAxis.currentMax"></div>
            </div>
           </div>
      <div class="modal-footer">    
            <button ng-click="dismiss()"  class="btn btn-danger pull-left" tabindex="-1"><i class="glyphicon glyphicon-remove"></i>Cancel</button>
           <button type="submit"   class="btn btn-danger pull-left" ><i class="glyphicon glyphicon-ok"></i>Save</button>

        </div>
    </form>
</div>

输出：

我需要将按钮与输入框的对齐方式对齐在同一行。我该怎么做？

Answer 1

使用 ul li 代替 div 行。喜欢，

 <div class="row">
    <ul class="liInline">
        <li>
            <button ng-click="addSeries()">
                Add Series</button></li>
        <li>
            <button ng-click="addPoints()">
                Add Points to Random Series</button></li>
        <li>
            <button ng-click="removeRandomSeries()">
                Remove Random Series</button></li>
        <li>
            <button ng-click="toggleHighCharts()">
                HighChart/HighStock</button></li>
        <li>
            <button ng-click="replaceAllSeries()">
                Replace all series</button></li>
                  </ul>
</div>

将 CSS 添加到您的页面，以便在一行中显示按钮。

<style type="text/css">
    .liInline li
    {
        display: inline;
        margin: 0 5px;
        list-style: none;
    }
</style>

Bootstrap 模态 window 列布局

Bootstrap modal window column layout

html

css

grid

twitter-bootstrap