連續的字段集合

Question

有一組問題可以用'是'和'否'來回答，當選擇任何選項時，必須顯示更多的字段。
所以我每個問題在一個row，當用戶選擇一個選項，我一定要垂直顯示所有的子領域。子字段div應該以不同的背景顏色顯示。
發生了什麼事情是：

1. 所有的childFields都試圖適合單行。
2. div.childFields的背景色正在拉伸到行的寬度。

HTML

<div class="row row-padded"> 
     <p>Question: Are you 18 years old?</p> 
     <p>Answer:</p> 
     <div class="radio-inline"> 
      <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">Yes</label> 
     </div> 
     <div class="radio-inline"> 
      <label><input type="radio" name="optionsRadios1" id="optionsRadios2" value="option1">No</label> 
     </div> 
     <div class="childFields"> 
      <p class="">Give full details here: </p> 
      <label class="pocLabel">Details</label> 
      <input type="text" name="city"> 
      <label class="pocLabel">Dates and Duration</label> 
      <input type="text" name="city"> 
      <label class="pocLabel">Details</label> 
      <input type="text" name="city"> 
      <label class="pocLabel">Dates and Duration</label> 
      <input type="text" name="city"> 
     </div> 
    </div> 

CSS：

.row-padded { 
    padding-left:25px; 
    padding-top:10px; 
    padding-bottom:10px; 
    background-color: #FFFFFF; 
    border: 1px solid #DDD; 
    border-radius: 6px; 
} 
div.childFields { 
    padding:20px; 
    background-color: #bbb; 
} 

Answer 1

您應該能夠通過使用標記結構來解決問題＃1 /類爲引導的文檔中給出：http://getbootstrap.com/css/#forms

<form role="form"> 
    <div class="form-group"> 
    <label for="exampleInputEmail1">Email address</label> 
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
    </div> 
<!-- ... ---> 
</form> 

關於＃2：如果你不希望childFields不顯示像塊級元素（即採取全寬），使其display:inline。另一種選擇是爲其分配固定寬度。