字段未在 Bootstrap 水平表单中排列答案

【问题标题】：Field not lining up in Bootstrap Horizontal Form字段未在 Bootstrap 水平表单中排列
【发布时间】：2016-06-29 21:00:32
【问题描述】：

我在 Angular 中有一个使用 Bootstrap 的水平表单。我有一个日期字段稍微错位。 IsMessedUp 日期选择器的输入字段与其上方的输入字段相比左对齐。理想情况下，我还希望它与“第六件事”日历元素的宽度相同。

日历元素代码在这里：

 <div class="form-group row">

                    <label class="col-md-2 col-md-offset-7 control-label">IsMessedUp Date: </label>

                        <p class="input-group col-md-3">
                            <input type="text" class="form-control input-sm" uib-datepicker-popup="{{format}}"
                                   ng-model="ismessedupdt"
                                   is-open="ismessedupdt.opened" min-date="minDate" max-date="maxDate"
                                   datepicker-options="dateOptions"
                                   ng-required="true" close-text="Close"/>
          <span class="input-group-btn">
            <button type="button" class="btn btn-default input-sm" ng-click="open3()"><i
                    class="glyphicon glyphicon-calendar"></i></button>
          </span>
                        </p>

                </div>

这里是小提琴：http://jsfiddle.net/k0c0e68n/

【问题讨论】：

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

【解决方案1】：

您应该删除 p 标签的 input-group [class*="col-"] 的 padding-left 和 padding-right，这将额外的空间添加到提到的输入元素 (isMessedUpDate)

解决方法：使用自定义类 inputGroup 或其他内容删除 input-group 类，并指定如下所示的类：

.inputGroup {
    position: relative;
    display: table;
    border-collapse: separate;
}

更新小提琴：http://jsfiddle.net/Raghu9972/k0c0e68n/1/

这可能不是一个正确的方法，相应地改变它:)

【讨论】：