[英]Bootstrap- Align two <select> horizontally
These two select from the same control-group are getting displayed vertically. 从同一个控件组中选择的这两个将垂直显示。 I want to display them horizontally. 我想水平显示它们。 I tried doing inline-block on CSS, but there are some other <div>
with the same control-group class, with different width and margin settings. 我尝试在CSS上进行内联阻止,但是还有其他一些<div>
具有相同的控件组类,但宽度和边距设置不同。 Changing the class name doesn't help either. 更改类名称也无济于事。
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<select class="form-control" name="week" id="week" title="Delivery" style="width:110px;">
<option data-val='OPEN' value="READY">Ready</option>
<option data-val='CLOSE' value="1st WEEK">1st Week</option>
<option data-val='CLOSE' value="2nd WEEK">2nd Week</option>
<option data-val='CLOSE' value="3rd WEEK">3rd Week</option>
</select>
<select name="Delivery" id="Delivery" disabled="">
<option value="OPEN">Open</option>
<option value="CLOSE">Close</option>
</select>
<script>
var category = document.getElementById('Delivery');
document.getElementById('week').onchange = function() {
var optionSelected = this.options[this.selectedIndex];
if (optionSelected.textContent != '-') {
if (optionSelected.dataset.val === 'OPEN') {
category.value = 'OPEN';
} else {
category.value = 'CLOSE';
}
} else {
category.value = '';
}
}
</script>
</div>
you could use multi column grid like http://stephenpkane.com/columns-2-even-width-bootstrap-columns/ and set no of columns or width accordingly. 您可以使用http://stephenpkane.com/columns-2-even-width-bootstrap-columns/之类的多列网格,并相应地设置列数或宽度。
fiddle - https://jsfiddle.net/nLddvkw6/1 小提琴-https: //jsfiddle.net/nLddvkw6/1
** **
<div class="control-group">
<div class="row">
<div class="border col-xs-4"><label for="week">Dispatch schedule:</label></div>
<div class="border col-xs-4"><select class="form-control" name="week" id="week" title="Delivery" style="width:110px;">
<option data-val='OPEN' value="READY">Ready</option>
<option data-val='CLOSE' value="1st WEEK">1st Week</option>
<option data-val='CLOSE' value="2nd WEEK">2nd Week</option>
<option data-val='CLOSE' value="3rd WEEK">3rd Week</option>
</select>
</div>
<div class="border col-xs-4"> <select class="form-control" name="Delivery" id="Delivery" disabled="" style="width:110px;">
<option value="OPEN">Open</option>
<option value="CLOSE">Close</option>
</select></div>
</div>
</div>
Flexbox version: Flexbox版本:
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<div style="display: flex; flex-direction: row;">
<select></select>
<select></select>
</div>
</div>
Bootstrap version: 引导程序版本:
<div class="control-group">
<label for="week">Dispatch schedule:</label>
<div class="row>
<div class="col-md-6>
<select></select>
</div>
<div class="col-md-6>
<select></select>
</div>
</div>
</div>
CSS version: CSS版本:
<div class="control-group">
<label for="week" style="display: block; width: 100%;">Dispatch schedule:</label>
<select style="display: float: width: 49%;></select>
<select style="display: float: width: 49%;></select>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.