Question

在Bootstrap 3中，将值添加到输入文本框的必要代码

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

http://getbootstrap.com/components/#input-groups

似乎不保留内联表单http://getbootstrap.com/css/#forms-inline的格式。

代码示例。第一段是功能内联形式。第二段添加前置代码，它会打破内联形式，导致它垂直（正常）。

http://bootply.com/101947

我在这里缺少的是我浪费了更多的时间而不是必须让这两个功能分别合理地发挥得很好。

Answer 1

使用网格

<div class="form-group col-md-2">

我不确定，这是正确的方法，但它始终适合我。

<form class="form-inline" role="form">
      <div class="form-group col-md-2">
        <div class="input-group ">
            <span class="input-group-addon">@</span>    
            <label class="sr-only" for="exampleInputEmail2">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
        </div>
      </div>
      <div class="form-group">
        <label class="sr-only" for="exampleInputPassword2">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
      <button type="submit" class="btn btn-default">Sign in</button>
    </form>

如何在bootstrap 3中使用输入prepend（或append）而不破坏内联表单

1 个答案: