1

标签未与字段对齐。
如果超过列宽，我想确保标签被优雅地包装。
这是完整的jsfiddle
HTML

<div class="row row-padded">
        <strong>Question: </strong><p>Are you 18 years old?</p>
        <strong>Answer:</strong>
        <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="row">
          <div class="col-md-8 childFields">
            <p class="">Give full details here: </p>
            <div class="row">
              <div class="col-md-6 colChildFields">
                <label>Nature of Condition</label>
                <input type="text" name="city"/>
              </div>
              <div class="col-md-6 colChildFields">
                <label>Dates and Duration</label>
                <input type="text" name="city"/>
              </div>
              <div class="col-md-6 colChildFields">
                <label>Name Of Doctor</label>
                <input type="text" name="city"/>
              </div>
              <div class="col-md-6 colChildFields">
                <label>Name of Hospital</label>
                <input type="text" name="city"/>
              </div>
              <div class="col-md-6 colChildFields">
                <label>Address of Hospital</label>
                <input type="text" name="city"/>
              </div>
            </div>
          </div>
        </div>
     </div>
4

2 回答 2

0

If you want to do an horizontal form, you'll have to use a container div with class form-group and add a class control-label to the label, form-control to the input, with a structure like this :

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Replace (in classes) -lg- by -xs- and it will be responsive and self managed if the label is longer.

See example with my jsFiddle

于 2013-08-19T13:36:28.703 回答
0

我不确定我是否理解正确，但如果这就是您要查找的内容，则应该将其添加到 CSS 中：

.col-md-6 label {
    width: 150px;
}
于 2013-08-19T13:21:21.930 回答