Bootstrap - 水平对齐两个 <select>答案

【问题标题】：Bootstrap- Align two <select> horizontallyBootstrap - 水平对齐两个 <select>
【发布时间】：2017-04-14 15:31:39
【问题描述】：

这两个来自同一控制组的选择正在垂直显示。我想水平显示它们。我尝试在 CSS 上做 inline-block，但还有一些其他 <div> 具有相同的控制组类，具有不同的宽度和边距设置。更改类名也无济于事。

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

【问题讨论】：

此代码显示它们水平分组。如果您还有其他导致问题的div，请尝试col 引导类

标签： javascript twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

弹性盒版本：

<div class="control-group">
     <label for="week">Dispatch schedule:</label>
      <div style="display: flex; flex-direction: row;">
         <select></select>
         <select></select>
      </div>
</div>

引导版本：

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

【讨论】：