字段没有在Bootstrap Horizo​​ntal Form中排队

Question

我使用Bootstrap在Angular中有一个水平表单。我有一个日期字段，只是略微错位。与其上方的输入字段相比，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/

Answer 1

你应该删除p标签的输入组[class * =“col-”]的padding-left和padding-right，它将额外的空间添加到提到的输入元素（isMessedUpDate）

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

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

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

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