Question

有一组问题可以通过“是”和“否”回答，当选择任何选项时，必须显示更多字段。
所以我将每个问题放在一个row中，当用户选择一个选项时，我必须垂直显示所有子字段。子场div应该以不同的背景颜色出现。
发生的事情是：

所有childFields都试图融入单行。
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。另一种选择是为其分配固定宽度。

套在行里面的领域

1 个答案: