2017-04-14 148 views
0

這兩個選擇來自同一個對照組的垂直顯示。我想要水平顯示它們。我試着在CSS上做內聯塊,但還有一些其他<div>具有相同的控制組類,具有不同的寬度和邊距設置。更改班級名稱也無濟於事。Bootstrap-水平對齊<select>

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

此代碼顯示水平分組。如果你有其他'div'導致問題,請嘗試'col'引導類 –

回答

0

您可以使用多列網格,如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> 
0

Flexbox的版本:

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