Html 使用输入组引导程序创建内联表单

Create an inline form with input-groups bootstrap

提问by Ben Fransen

I'm trying to create a simple inline form using input groups to display icons before the inputs. As far as I'm aware of I'm following the documentation but the form doesn't display as expected. See this JSFiddle, it demonstrates the problem. I assumed it should be displayed like this(only with the icons prepended of course). How can this be solved?

我正在尝试创建一个简单的内联表单，使用输入组在输入之前显示图标。据我所知，我正在关注文档，但表单未按预期显示。看到这个 JSFiddle，它说明了这个问题。我认为它应该像这样显示（当然只有预先添加了图标）。如何解决这个问题？

My code:

我的代码：

<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>

采纳答案by Damian Trzepa?a

i've made it work like this:

我让它像这样工作：

<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/

http://jsfiddle.net/n5qmc/

回答by Jeewes

This is known issue and will be fixed in Bootstrap v.3.2.0 according to this ship list.

这是已知问题，将根据此船舶列表在 Bootstrap v.3.2.0 中修复。

Before that you can fix it your self like this:

在此之前，您可以像这样自己修复它：

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

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

回答by jessie james Hymanson taylor

Taken from Bootstrap Docs

取自 Bootstrap 文档

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontalto the form. Doing so changes .form-groups to behave as grid rows, so no need for .row. I also added in semantic attributes for the labels you should always be using on every input (use .sr-onlyto hide the labels if necessary). This makes the form not inlinebut horizontal.

通过添加.form-horizontal到表单，使用 Bootstrap 的预定义网格类在水平布局中对齐标签和表单控件组。这样做会将.form-groups更改为网格行，因此不需要.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>

回答by Ryan

Not sure if this is helpful, but I thought I would post as I haven't seen this elsewhere. I was trying to get an inline form with inline labels and an add-on using Bootstrap v3. Here is the code that worked for me. I used the grid system in divs to position the label and input group and the add-on within a grid item.

不确定这是否有帮助，但我想我会发布，因为我没有在其他地方看到过。我试图使用 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>