html - 如何在不破坏内联形式的情况下在 bootstrap 3 中使用输入前置(或附加)

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>