Question

我正在尝试在bootstrap中创建一个表单水平表单但是当我尝试在控制字段上添加input-append时，该字段向右移动。我无法找到它发生原因的确切来源......或者我是否做错了什么。我正在尝试使用密码输入字段添加一个简单的PWD ...

<form class="bs-docs-example form-horizontal">
            <div class="control-group">
              <label class="control-label" for="inputEmail">Email</label>
              <div class="controls">
                <input type="text" id="inputEmail" placeholder="Email">
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="inputPassword">Password</label>
              <div class="controls input-append">
                <input type="password" id="inputPassword" placeholder="Password">
                    <span class="add-on">PWD</span>
              </div>
            </div>
            <div class="control-group">
              <div class="controls">
                <label class="checkbox">
                  <input type="checkbox"> Remember me
                </label>
                <button type="submit" class="btn">Sign in</button>
              </div>
            </div>
          </form>

这里有一个jsfiddle .. http://jsfiddle.net/zEUH4/

感谢。

Answer 1

正确的结构是：

<div class="control-group">
  <label class="control-label" for="inputPassword">Password</label>
  <div class="controls">
    <div class="input-append">
      <input type="password" id="inputPassword" placeholder="Password">
      <span class="add-on">PWD</span>
    </div>
  </div>
</div>

Answer 2

如果您使用input-append类并将其移动到应该解决问题的控制组div上。

http://jsfiddle.net/zEUH4/1/

<div class="control-group input-append">
  <label class="control-label" for="inputPassword">Password</label>
  <div class="controls">
    <input type="password" id="inputPassword" placeholder="Password">
    <span class="add-on">PWD</span>
  </div>
</div>

Answer 3

.input-append课程将display: inline-block;添加到<div>。 .controls向margin: 180px添加<div>，距离左边缘通常为180px，但现在距离<label>为180px。

这两个类不适合在1个元素上使用。

<form class="bs-docs-example form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
            <input type="text" id="inputEmail" placeholder="Email">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputPassword">Password</label>
        <div class="controls">
            <div class="input-append">
                <input type="password" id="inputPassword" placeholder="Password">
                <span class="add-on">PWD</span>
            </div>
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <label class="checkbox"><input type="checkbox">Remember me</label>
            <button type="submit" class="btn">Sign in</button>
        </div>
    </div>
</form>

See the fiddle

或者，您可以将<div>设置为display: block。

<div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls input-append" style="display: block">
        <input type="password" id="inputPassword" placeholder="Password">
        <span class="add-on">PWD</span>
    </div>
</div>

Bootstrap水平表单，带有输入 - 附加在文本框上

3 个答案:

See the fiddle