Angular Bootstrap：如何在模態窗口中並排佈局兩個小部件

Question

我試圖將兩個Kendo UI小部件並排放置在Angular-UI模式窗口內。

我的問題是，他們正在一個在另一個之下，因爲在嵌入式屏幕截圖。

請注意頂部的尺寸列表（<li ng-repeat）和底部的尺寸網格。我想這是並排側：

這裏是HTML模板，這是角引導模式的一部分：

<form class="form-horizontal"> 
<fieldset> 

<!-- Form Name --> 
<legend>User Dimensions</legend> 

<div class="form-group"> 
    <label class="col-md-4 control-label" for="radios-0">Choose One</label> 
    <div class="col-md-4"> 
     <div class="radio"> 
      <label for="radios-0"> 
       <input name="radios" id="radio1" value="1" type="radio"> 
       Defined Portfolios 
      </label> 
     </div> 
     <div class="radio"> 
      <label for="radios-1"> 
       <input name="radios" id="radio2" value="2" checked="checked" type="radio"> 
       Specify Dimensions 
      </label> 
     </div> 
    </div> 
    <label class="col-md-4 control-label" for="radios-0">Dimensions</label> 

    <!-- *** KENDO SORTABLE *** --> 
    <div class="col-md-4"> 
     <ul class="dim-list" kendo-sortable k-placeholder="settings.placeholder" k-hint="settings.hint"> 
      <li ng-repeat="dim in settings.dimenDS">{{dim.name}}</li> 
     </ul> 

    </div> 

    <!-- *** KENDO GRID *** --> 
    <div class="col-md-8"> 
     <span id="userDimenGrid" kendo-grid="settings.userDimenGrid" 
         k-data-source="settings.userDimenGridDS" 
         k-options="settings.userDimenGridOptions" 
         k-rebind="settings.userDimenGridOptions" /> 
    </div> 
</div>  

</fieldset> 
</form> 

<style scoped>  

    .dim-list li{ 
    list-style-type:none; 
    background-color:silver; 
    font-size:12px; 
    font-weight:bold; 
    width: 180px; 
    margin: 5px; 
    line-height: 30px; 
    text-align: center;   
    border-radius: 3px; 
    cursor:move; 
} 
li.hint { 
    display: block; 
    padding: 10px; 
    width: 200px; 
    background-color: #52aef7; 
    color: #fff; 
} 

li.hint:last-child { 
    border-radius: 4px; 
} 

li.hint span { 
    color: #fff; 
} 

li.placeholder { 
    background-color: #dceffd; 
    color: #52aef7; 
    text-align: right; 
} 
</style> 

我想這是方並且在這種<form>內格式化它有很多問題。

Answer 1

最終的解決方案：

我最終花更多的時間與自舉類row和/或row-fluid工作，以及col-lg-4。

事實證明標準"form-group"類不會完全符合我想要做的。當然，因爲它不完全是一種形式。相反，我將Kendo UI小部件放在一起。

<form class="form-horizontal"> 
<fieldset> 

<!-- Form Name --> 
<legend>User Dimensions</legend> 

<div class="form-group"> 
    <label class="col-md-4 control-label" for="radios-0">Choose One</label> 
    <div class="row"> 
    <div class="col-lg-4"> 
     <div class="radio"> 
      <label for="radios-0"> 
       <input name="radios" id="radio1" value="1" type="radio"> 
       Defined Portfolios 
      </label> 
     </div> 
     <div class="radio"> 
      <label for="radios-1"> 
       <input name="radios" id="radio2" value="2" checked="checked" type="radio"> 
       Specify Dimensions 
      </label> 
     </div> 
    </div> 
    <div class="col-lg-8"></div> 
    </div> 
    <div class="row-fluid"> 
     <div class="col-lg-3">     

      <ul class="dim-list" kendo-sortable k-hint="settings.hint" k-move="settings.move" k-end="settings.end" k-placeholder="settings.placeholder"> 
       <li ng-repeat="dim in settings.dimenDS">{{dim.name}}</li> 
      </ul> 

     </div> 
     <div class="col-lg-8"> 
      <span id="userDimenGrid" kendo-grid="settings.userDimenGrid" 
          k-data-source="settings.userDimenGridDS" 
          k-options="settings.userDimenGridOptions" 
          k-rebind="settings.userDimenGridOptions" /> 
     </div> 
    </div> 
</div> 
</fieldset> 
</form> 
<style scoped>  
    .dim-list li{ 
    list-style-type:none; 
    display: inline-block; 
    background-color:silver; 
    font-size:12px; 
    font-weight:bold; 
    width: 180px; 
    margin: 5px; 
    line-height: 30px; 
    text-align: center;   
    border-radius: 3px; 
    cursor:move; 
} 
li.hint { 
    display: block; 
    padding: 10px; 
    width: 200px; 
    background-color: #52aef7; 
    color: #fff; 
} 

li.hint:last-child { 
    border-radius: 4px; 
} 

li.hint span { 
    color: #fff; 
} 

li.placeholder { 
    background-color: #dceffd; 
    color: #52aef7; 
    text-align: right; 
}