Question

我正在尝试使用输入组创建一个简单的内联表单，以在输入之前显示图标。据我所知，我正在关注文档，但表单没有按预期显示。 See this JSFiddle，它证明了这个问题。我假设it should be displayed like this（当然只有前面的图标）。怎么解决这个问题？

我的代码：

<form class="form-inline" role="form">
    <div class="form-group">    
        <div class="input-group">                       
            <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
            <input type="email" class="form-control" placeholder="Enter email"/>
        </div>
    </div>

    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
            <input type="password" class="form-control" placeholder="Choose password"/>
        </div>
    </div>                          

    <button type="submit" class="btn btn-default">Create account</button>
</form>

Answer 1

这是已知问题，将根据this ship list在Bootstrap v.3.2.0中修复。

在此之前你可以像这样修理自己：

.input-group {
    display: inline-table;
    vertical-align: middle;

    .input-group-addon,
    .input-group-btn,
    .form-control {
        width: auto !important;
    }
}

Answer 2

我已经让它像这样工作：

<form class="form-inline" role="form">
<div class="row">
    <div class="form-group col-sm-3">
        <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>

            <input type="email" class="form-control" placeholder="Enter email" />
        </div>
    </div>
    <div class="form-group col-sm-3">
        <div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>

            <input type="password" class="form-control" placeholder="Choose password" />
        </div>
    </div>
    <button type="submit" class="btn btn-default">Create account</button>
</div>

http://jsfiddle.net/n5qmc/

Answer 3

取自Bootstrap Docs

使用Bootstrap的预定义网格类，通过向表单添加.form-horizontal，在水平布局中对齐表单控件的标签和组。这样做会使.form-group更改为网格行，因此不需要.row。我还为每个输入应始终使用的标签添加了语义属性（如果需要，使用.sr-only隐藏标签）。这使得表单不是内联，而是水平。

<form class="form-horizontal" role="form">
       <div class="form-group">
          <label for="email" class="sr-only">Email</label>
          <div class="input-group col-sm-3"> 
              <span class="input-group-addon">
                  <i class="fa fa-envelope-o fa-fw"></i>
              </span>                            
              <input type="email" id="email" name="email" class="form-control" placeholder="Enter email" />
        </div>
        <div class="form-group">
            <label for="password" class="sr-only">Password</label>
            <div class="input-group col-sm-3"> 
                <span class="input-group-addon">
                    <i class="fa fa-key fa-fw"></i>
                </span>
                <input type="password" id="password" name="password" class="form-control" placeholder="Choose password" />
            </div>  
        </div>
        <button type="submit" class="btn btn-default">Create account</button>
</form>

Answer 4

不确定这是否有用，但我想我会张贴，因为我在其他地方没见过。我试图使用内联标签和使用Bootstrap v3的附加组件获得内联表单。这是适合我的代码。我在div中使用网格系统来定位标签和输入组以及网格项中的附加组件。

       <div class="form-group">
        <div class="col-sm-2">
          <label class="control-label" for="input_one">Label Text</label>
        </div>
        <div class="col-sm-10">
          <div class="input-group">
            <input class="form-control" placeholder="Placeholder Text" type="text" name="input_one" id="input_one">
            <span class="input-group-addon">Add on text</span>
          </div>
        </div>
      </div>

使用input-groups bootstrap创建内联表单

4 个答案:

取自Bootstrap Docs