7

我正用头撞墙，试图从带有单选按钮的 Bootstrap 中获得理智的行为.form-horizontal。

问题是让单选按钮及其标签对齐，同时与表单的其余部分对齐。我管理过的最好的是：

    <legend>New user</legend>
    <form accept-charset="UTF-8" action="#" class="form-horizontal" id="new_user" method="post">

        <div class="control-group">
          <label class="control-label" for="user_affiliation">Affiliation</label>
            <div class="controls">
              <input id="user_affiliation" name="user[affiliation]" size="30" type="text" />
            </div>
          </div>

        <div class="control-group">
          <div clas="controls">
            <div class="radio">
              <label>
                <input id="user_role_managing_editor" name="user[role]" type="radio" value="Managing editor">
                Managing editor
              </label>
              <label>
                <input id="user_role_area_editor" name="user[role]" type="radio" value="Area editor">
                Area editor
              </label>
              <label>
                <input id="user_role_author_or_referee" name="user[role]" type="radio" value="Author or referee">
                Author/referee
              </label>
            </div>
          </div>
        </div>

        <div style="text-align: center;">
          <input class="btn btn-primary" name="commit" type="submit" value="Register" />
        </div>

    </form>

这让我明白了：在此处输入图像描述

如您所见，单选按钮与表单的其余部分格格不入。他们应该与文本字段垂直对齐，或者做一些比拥抱左边更明智的事情，就好像这是一个.form-inline.

任何帮助将不胜感激。

4

3 回答 3

10

没有黑客！，使用 bootstrap2：

<div class="control-group">
  <label class="control-label"> User role</label>
  <div class="controls">
    <label class="radio">
      <input type="radio" name="user[role]" id="user_role_managing_editor" value="Managing editor" checked>
      Managing editor
    </label>
    <label class="radio">
      <input type="radio" name="user[role]" id="user_role_area_editor" value="Area editor">
      Area editor
    </label>
    <label class="radio">
      <input type="radio" name="user[role]" id="user_role_author_or_referee" value="Author or referee">
      Author/referee
    </label>
  </div>
</div>

演示：http: //jsfiddle.net/GX6q4/1/

更新：这是 Bootstrap3 版本：

<legend>New user</legend>
<form accept-charset="UTF-8" action="#" class="form-horizontal" id="new_user" method="post">
  <div class="form-group">
    <label class="col-xs-2 control-label" for="user_affiliation">Affiliation</label>
    <div class="col-xs-10">
      <input class="form-control" id="user_affiliation" name="user[affiliation]" size="30" type="text" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-2 control-label">User role</label>
    <div class="col-xs-10">
      <div class="radio">
        <label>
          <input type="radio" name="user[role]" id="user_role_managing_editor" value="Managing editor" checked>Managing editor
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="user[role]" id="user_role_area_editor" value="Area editor">Area editor
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="user[role]" id="user_role_author_or_referee" value="Author or referee">Author/referee
        </label>
      </div>
    </div>
  </div>
</form>

演示：http: //jsfiddle.net/24sx72mn/1/

引导程序 4 版本：

<legend>New user</legend>
<form accept-charset="UTF-8" action="#" id="new_user" method="post">
  <div class="form-group row">
    <label class="col-sm-2 col-form-label" for="user_affiliation">Affiliation</label>
    <div class="col-sm-10">
      <input class="form-control" id="user_affiliation" name="user[affiliation]" type="text" />
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label">User role</label>
    <div class="col-sm-10">
      <div class="form-check">

        <input type="radio" class="form-check-input" name="user[role]" id="user_role_managing_editor" value="Managing editor" checked>
        <label class="form-check-label" for="user_role_managing_editor">
          Managing editor
        </label>
      </div>
      <div class="form-check">

        <input type="radio" class="form-check-input" name="user[role]" id="user_role_area_editor" value="Area editor">
        <label class="form-check-label" for="user_role_area_editor">
          Area editor
        </label>
      </div>
      <div class="form-check">

        <input type="radio" class="form-check-input" name="user[role]" id="user_role_author_or_referee" value="Author or referee">
        <label class="form-check-label" for="user_role_author_or_referee">
          Author/referee
        </label>
      </div>
    </div>
  </div>
</form>

演示：http: //jsfiddle.net/p8wyd7s8/1/

于 2014-01-14T23:34:57.207 回答
1

没有 hack，你只需要使用 Bootstrap 网格系统（col-xx-x 类），例如：

<div class="form-group" >
    <label for="txt_web" class="col-lg-3 control-label">xxx</label>
    <div class="col-lg-9">
        <input class="form-control input-sm" type="text" name="txt_web" id="txt_web"  />
    </div>
</div>

<div class="form-group" >
    <label for="txt_web" class="col-lg-3 control-label">xxx</label>
    <div class="col-lg-9">
        <div class="radio">...</div>
        ...

    </div>
</div>
于 2013-10-04T11:45:17.460 回答
0

radio为您的班级添加一些风格，

.radio {
    margin-left:180px;
}

在这里查看演示。

于 2013-09-23T05:26:31.397 回答