Бутстрап modal window column layout

Question

Мне нужна помощь в выравнивании содержимого внутри модального окна. Вот 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 row. Например,

<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>