Question

标签与字段不对齐。
我想确保标签在超出列宽时优雅地包裹。
这是完整的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>

Answer 1

我不确定我是否理解你，但是如果that是你想要的，你应该把它添加到CSS：

.col-md-6 label {
    width: 150px;
}

Answer 2

如果你想做一个水平表单，你必须使用一个带有form-group类的容器div，并在标签control-label中添加一个类form-control到输入，结构如下：

<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>

-lg-替换（在课程中）-xs-，如果标签较长，它将具有响应性并自我管理。

请参阅我的jsFiddle

示例

Twitter Bootstrap表单字段格式

2 个答案: