以 bootstrap 3 水平形式组合输入组和表单组答案

【问题标题】：combine input-group and form-groups in bootstrap 3 horizontal form以 bootstrap 3 水平形式组合输入组和表单组
【发布时间】：2014-01-17 03:51:01
【问题描述】：

我用 3 个输入元素制作了一个 jsfiddle：http://jsfiddle.net/zb4dc/1/

如您所见，它们并没有很好地对齐。如何做到这一点？

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputfield1" class="col-sm-2 control-label">Input 1</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
    </div>
  </div>
  <div class="form-group">
    <label for="inputfield2" class="col-sm-2 control-label">Input 2</label>
    <div class="controls">
      <div class="input-group">
        <input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
        <span class="input-group-addon">.00</span>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label for="inputfield3" class="col-sm-2 control-label">Input 3</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputfield3" placeholder="Input     3">
  </div>
</form>

【问题讨论】：

标签： html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您只是在第二个输入字段中忘记了col-sm-10。这是您更正后的代码：

<body>
    <div class="container">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="inputfield1" class="col-sm-2 control-label">Input 1</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
                </div>
            </div>
            <div class="form-group">
                <label for="inputfield2" class="col-sm-2 control-label">Input 2</label>
                <div class="col-sm-10 controls">
                    <div class="input-group">
                        <input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
                        <span class="input-group-addon">.00</span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="inputfield3" class="col-sm-2 control-label">Input 3</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputfield3" placeholder="Input 3">
                </div>
            </div>
        </form>
    </div>
</body>

小提琴：http://jsfiddle.net/zb4dc/2/

【讨论】：

我知道！那个真正困扰您并且肉眼几乎看不见的小虫子！真的很郁闷！
如果需要按钮而不是插件：使用 input-group-btn 而不是 input-group-addon：getbootstrap.com/components/#input-groups-buttons
@niico Thuurke 最后一次出现是在 2015 年 10 月 18 日。此问题没有可接受的答案。