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