Bootstrap 3：多重選擇輸入組重疊

我在將多個select標記加入.input-group時遇到問題。Bootstrap 3：多重選擇輸入組重疊

這裏是我的代碼：

<form class="form-horizontal" role="form"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="form-group"> 
         <label class="control-label col-md-6" >Label 1</label> 
         <div class="col-md-6"> 
         <select class="form-control"> 
         </select> 
         </div> 
        </div> 
       </div>    
       <div class="col-md-6"> 
        <div class="form-group"> 
         <label class="control-label col-md-6" >Label 2</label> 
         <div class="col-md-6"> 
         <select class="form-control" > 
         </select> 
         </div> 
        </div>     
       </div>    
      </div> 
     <div class="row"> 
       <div class="col-md-6"> 
        <div class="form-group"> 
         <label class="control-label col-md-6">Label 3</label> 
         <div class="input-group col-md-6"> 
         <span class="input-group-btn"> 
           <select class="form-control"> 
          </select> 
          </span> 
          <span class="input-group-btn"> 
           <select class="form-control"> 
          </select> 
          </span> 
          <span class="input-group-btn"> 
           <select class="form-control"> 
          </select> 
          </span>    
         </div> 
        </div> 
       </div>       
      </div> 
     </form>

的問題如下：

在過去form-group，標籤後3，三span的與select裏面他們有更高的寬度，就應該有和他們重疊的input-group容器的左側和右側（約15像素）。

這裏是jsfiddle demostrating問題（只要按一下第一或第三選擇最後一排）

來源

2016-01-13 Zbynek

我不能看到問題。你能解釋更多嗎？ –

使用class =「form-group」製作另一個div，我在下面添加了演示。 –

製造另一個DIV使用class="form-group"，查看全頁模式DEMO中的片段

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<form class="form-horizontal" role="form"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <div class="form-group"> 
 
     <label class="control-label col-md-6">Label 1</label> 
 
     <div class="col-md-6"> 
 
      <select class="form-control"> 
 
      </select> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="form-group"> 
 
     <label class="control-label col-md-6">Label 2</label> 
 
     <div class="col-md-6"> 
 
      <select class="form-control"> 
 
      </select> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <div class="form-group"> 
 
     <label class="control-label col-md-6">Label 3</label> 
 
     <div class="col-md-6"> 
 
      <div class="input-group "> 
 

 

 
      <span class="input-group-btn"> 
 
    \t \t \t \t \t  \t \t <select class="form-control"> 
 
    \t \t \t   \t \t </select> 
 
    \t \t \t \t  \t \t </span> 
 
      <span class="input-group-btn"> 
 
    \t \t \t \t \t  \t \t <select class="form-control"> 
 
    \t \t \t   \t \t </select> 
 
    \t \t \t \t  \t \t </span> 
 
      <span class="input-group-btn"> 
 
    \t \t \t \t \t  \t \t <select class="form-control"> 
 
    \t \t \t   \t \t </select> 
 
    \t \t \t \t  \t \t </span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>

來源

2016-01-13 10:08:26

正是我想要的，謝謝 – Zbynek

改變HTML

<form class="form-horizontal container-fluid" role="form"> 
     <div class="row"> 
      <div class="col-md-6"> 
       <div class="form-group"> 
        <label class="control-label col-md-6" >Label 1</label> 
        <div class="col-md-6"> 
        <select class="form-control"> 
        </select> 
        </div> 
       </div> 
      </div>    
      <div class="col-md-6"> 
       <div class="form-group"> 
        <label class="control-label col-md-6" >Label 2</label> 
        <div class="col-md-6"> 
        <select class="form-control" > 
        </select> 
        </div> 
       </div>     
      </div>    
     </div> 
    <div class="row"> 
      <div class="col-md-6"> 
       <div class="form-group"> 
        <label class="control-label col-md-6">Label 3</label> 
       <div class="input-group"> 
    <span class="input-group-addon"> 
    <input type="checkbox" aria-label="Checkbox for following text input"> 
    </span> 
    <select class="form-control"> 
         </select> 
</div> 
      <div class="input-group"> 
    <span class="input-group-addon"> 
    <input type="checkbox" aria-label="Checkbox for following text input"> 
    </span> 
    <select class="form-control"> 
         </select> 
</div> 
      <div class="input-group"> 
    <span class="input-group-addon"> 
    <input type="checkbox" aria-label="Checkbox for following text input"> 
    </span> 
    <select class="form-control"> 
         </select> 
</div> 
       </div> 
      </div>       
     </div> 
    </form>

https://jsfiddle.net/qrtcq8bs/4/

來源

2016-01-13 09:53:50

謝謝，但我需要在輸入組中的所有'選擇'在一行，沒有插件按鈕。只是連續選擇了三個'select' – Zbynek

另外，請解釋您在代碼中所做的更改。 –

只需添加

的margin-left:0; & margin-right:0;

形式組

，因爲在默認情況下是負

<div class="form-group" style="margin-left:0 !important; margin-right:0 !important;"> 
    <label class="control-label col-md-6">Label 3</label> 
    <div class="input-group col-md-6"> 
    <span class="input-group-btn"> 
           <select class="form-control"> 
          </select> 
          </span> 
    <span class="input-group-btn"> 
           <select class="form-control"> 
          </select> 
          </span> 
    <span class="input-group-btn"> 
           <select class="form-control"> 
          </select> 
          </span> 
    </div> 
</div>

來源

2016-01-13 10:08:12 bfahmi

Bootstrap 3：多重選擇輸入組重疊

回答

相關問題