Question

从同一控制组中选择的这两个是垂直显示的。我想水平显示它们。我尝试在CSS上进行内联块，但还有其他一些＆lt; div＆gt;具有相同的控制组类，具有不同的宽度和边距设置。更改班级名称也没有帮助。＆lt; div class =＆＃34; control-group＆＃34;＆gt; ＆lt; label for =＆＃34; week＆＃34;＆gt; Dispatch schedule：＆lt; / label＆gt; ＆lt; select class =＆＃34; form-control＆＃34;命名=＆＃34;周＆＃34; ID =＆＃34;周＆＃34;标题=＆＃34;交付＆＃34;风格=＆＃34;宽度：110px;＆＃34;＆GT; ＆lt; option data-val =＆＃39; OPEN＆＃39;值=＆＃34; READY＆＃34;＆GT;就绪＆LT; /选项＆GT; ＆lt; option data-val =＆＃39; CLOSE＆＃39;值=＆＃34;第一周＆＃34;＆gt;第一周＆lt; /选项＆gt; ＆lt; option data-val =＆＃39; CLOSE＆＃39; value =＆＃34; 2nd WEEK＆＃34;＆gt; 2nd Week＆lt; / option＆gt; ＆lt; option data-val =＆＃39; CLOSE＆＃39; value =＆＃34; 3rd WEEK＆＃34;＆gt; 3rd Week＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt; select name =＆＃34; Delivery＆＃34; ID =＆＃34;交付＆＃34;禁用=＃34＆;＆＃34;＆GT; ＆lt; option value =＆＃34; OPEN＆＃34;＆gt;打开＆lt; /选项＆gt; ＆lt; option value =＆＃34; CLOSE＆＃34;＆gt;关闭＆lt; /选项＆gt; ＆LT; /选择＆GT; ＆LT;脚本＆GT; var category = document.getElementById（＆＃39; Delivery＆＃39;）; document.getElementById（＆＃39; week＆＃39;）。onchange = function（）{ var optionSelected = this.options [this.selectedIndex]; if（optionSelected.textContent！=＆＃39; - ＆＃39;）{ if（optionSelected.dataset.val ===＆＃39; OPEN＆＃39;）{ category.value =＆＃39; OPEN＆＃39 ;; } else { category.value =＆＃39;关闭＆＃39 ;; } } else { category.value =＆＃39;＆＃39 ;; } } ＆LT; /脚本＆GT; ＆LT; / DIV＆GT;

Answer 1

您可以使用http://stephenpkane.com/columns-2-even-width-bootstrap-columns/之类的多列网格，并相应地设置列数或宽度。

小提琴 - 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>

Answer 2

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版本：

<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版本：

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

Bootstrap-水平对齐两个<select>

2 个答案: