html - 行内的一组字段

Question

There are set of questions which could be answered with 'Yes' and 'No' and when any of the option is selected, more fields have to be shown.
因此，我将每个问题都放在一个问题中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

您应该能够通过使用 Bootstrap 文档中给出的标记结构/类来解决问题 #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. 另一种选择是为其分配固定宽度。