Angular Bootstrap:如何在模态窗口中并排布局两个小部件
问题描述:
我试图将两个Kendo UI小部件并排放置在Angular-UI模式窗口内。Angular Bootstrap:如何在模态窗口中并排布局两个小部件
我的问题是,他们正在一个在另一个之下,因为在嵌入式屏幕截图。
请注意顶部的尺寸列表(<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>
内格式化它有很多问题。
答
最终的解决方案:
我最终花更多的时间与自举类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;
}