连续的字段集合

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。另一种选择是为其分配固定宽度。