Bootstrap動態下拉複選框格式

Question

靜態學習Bootstrap，我試圖用複選框創建一個輸入表單，其中任何複選框的下拉列表出現（對於特定的複選框）。我遇到的問題是每當出現下拉菜單時，都會將其他複選框轉移。我想阻止它，以便複選框固定到位，並且在下拉菜單出現時不會左右移動。

下面是HTML片段：

<div class="container-fixed"> 
    <div class="row"> 

     <div class="form-check col-xs-6" > 
     <label class="form-check-label"> 
     <input type="checkbox" value="cheese" >cheese 
     <div class="form-group"id="cheese"> 
      <label for="Quantity">How Much?</label> 
       <select class="form-control" > 
        <option>regular</option> 
        <option>Extra</option> 
       </select> 
     </div> 
     </label> 
     </div> 

     <div class="form-check col-xs-6" > 
     <label class="form-check-label"> 
     <input type="checkbox" value="Broccoli" >Broccoli 
     <div class="form-group"id="Broccoli"> 
      <label for="Quantity">How Much?</label> 
       <select class="form-control" > 
        <option>regular</option> 
        <option>Extra</option> 
       </select> 
     </div> 
     </label> 
     </div> 

     <div class="form-check col-xs-6" > 
     <label class="form-check-label"> 
     <input type="checkbox" value="Peppers" >Peppers 
     <div class="form-group"id="Peppers"> 
      <label for="Quantity">How Much?</label> 
       <select class="form-control" > 
        <option>regular</option> 
        <option>Extra</option> 
       </select> 
     </div> 
     </label> 
     </div> 

這裏是jQuery的：

$(document).ready(function() { 
    $("input").click(function() { 
      var show = "#" + this.value 
      $(show).show(); 
    }) 
}) 

Answer 1

您必須使用visibility:hidden CSS屬性隱藏選擇框。該屬性將隱藏該元素，但它將在頁面上有空間。 更多的描述：http://www.w3schools.com/cssref/pr_class_visibility.asp

這樣所以上面的代碼，你可以做的改變：

HTML：

<div class = "container-fixed"> 
    <div class = "row"> 
     <div class = "form-check col-xs-6" > 
      <label class = "form-check-label"> 
       <input type = "checkbox" value = "cheese" >cheese 
       <div class = "form-group select-box" id = "cheese"> 
        <label for = "Quantity">How Much?</label> 
        <select class = "form-control" > 
         <option>regular</option> 
         <option>Extra</option> 
        </select> 
       </div> 
      </label> 
     </div> 

     <div class = "form-check col-xs-6" > 
      <label class = "form-check-label"> 
       <input type = "checkbox" value = "Broccoli" >Broccoli 
       <div class = "form-group select-box" id = "Broccoli"> 
        <label for = "Quantity">How Much?</label> 
        <select class = "form-control" > 
         <option>regular</option> 
         <option>Extra</option> 
        </select> 
       </div> 
      </label> 
     </div> 

     <div class = "form-check col-xs-6" > 
      <label class = "form-check-label"> 
       <input type = "checkbox" value = "Peppers" >Peppers 
       <div class = "form-group select-box" id = "Peppers"> 
        <label for = "Quantity">How Much?</label> 
        <select class = "form-control" > 
         <option>regular</option> 
         <option>Extra</option> 
        </select> 
       </div> 
      </label> 
     </div> 

CSS：

.select-box{ 
    visibility: hidden; 
} 

的jQuery ：

$(document).ready(function() { 
    $("input[type='checkbox']").click(function() { 
     var show = this.value 
     if ($(this).prop('checked')){ 
      $("#"+show).css('visibility', 'visible'); 
     }else{ 
      $("#"+show).css('visibility', 'hidden'); 
     } 
    }) 
}) 

的jsfiddle：https://jsfiddle.net/8d1fnb5z/

Answer 2

我會看的複選框的當前行下方添加新.row。只要您可以將您的複選框和下拉列表分別放在一行上，就可以工作。然後確保你的col類匹配。因此，在這個例子中，我使用.col-xs-4

http://codepen.io/partypete25/pen/VmgPVp

HTML：

<div class="container-fixed"> 
    <div class="row"> 

    <div class="form-check col-xs-4"> 
     <label class="form-check-label"> 
     <input type="checkbox" value="cheese" >cheese 
     </label> 
    </div> 
    <div class="form-check col-xs-4"> 
     <label class="form-check-label"> 
     <input type="checkbox" value="Broccoli" >Broccoli 
     </label> 
    </div> 
    <div class="form-check col-xs-4"> 
     <label class="form-check-label"> 
     <input type="checkbox" value="Peppers" >Peppers 
     </label> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-4"> 
     <div class="form-group hide" id="cheese"> 
     <label for="Quantity">How Much?</label> 
     <select class="form-control"> 
      <option>regular</option> 
      <option>Extra</option> 
     </select> 
     </div> 
    </div> 
    <div class="col-xs-4"> 
     <div class="form-group hide" id="Broccoli"> 
     <label for="Quantity">How Much?</label> 
     <select class="form-control"> 
      <option>regular</option> 
      <option>Extra</option> 
     </select> 
     </div> 
    </div> 
    <div class="col-xs-4"> 
     <div class="form-group hide" id="Peppers"> 
     <label for="Quantity">How Much?</label> 
     <select class="form-control"> 
      <option>regular</option> 
      <option>Extra</option> 
     </select> 
     </div> 
    </div> 
    </div> 

JAVASCRIPT：

$("input").change(function() { 
    var chk = "#" + this.value; 
    if ($(this).is(':checked')) { 
    $(chk).removeClass('hide'); 
    } else { 
    $(chk).addClass('hide'); 
    } 
});