Angular UI Bootstrap Input-Group-Button - 该死的浮动按钮

Question

我有一个表单，我刚刚添加了一个引导日期选择器并使用了一个输入组按钮。 我遇到的问题是按钮在包含 div 的范围内向右浮动。 有问题的按钮是 TargetDate 右侧的按钮。

我一直在遵循TutorialsPoint的指示

JSFiddle 在这里JSFiddle

<section class="mainbar">
<section class="matter">
    <div class="container">
        <div class="row">
            <div class="widget wviolet">
                <div ht-widget-header title="{{vm.title}}"></div>
                <div class="widget-content user">
                    <form name="submitjobform" novalidate class="form-horizontal" id="submitjobform" ng-submit="vm.processForm()">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">Name</label>
                            <div class="col-sm-10">
                                <input ng-model="formData.name" type="text" class="form-control" name="name" ng-required="true"> <span class="error" ng-show="submitjobform.name.$error.required">
                                    Required!</span>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="description" class="col-sm-2 control-label">Description</label>
                            <div class="col-sm-10">
                                <textarea ng-model="formData.description" class="form-control" name="description" ng-required="true"></textarea> <span class="error" ng-show="submitjobform.description.$error.required">
                                        Required!</span>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="category" class="col-sm-2 control-label">Category</label>
                            <div class="col-sm-10">
                                <select ng-model="formData.category" class="form-control" name="category" ng-required="true" ng-options="name.name for name in vm.categories"></select> <span class="error" ng-show="submitjobform.category.$error.required">
                                            Required!</span>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="assignee" class="col-sm-2 control-label">Assignee</label>
                            <div class="col-sm-10">
                                <select ng-model="formData.assignee" class="form-control" name="assignee" ng-required="true" ng-options="name.name for name in vm.names"></select> <span class="error" ng-show="submitjobform.assignee.$error.required">
                                                Required!</span>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="targetDate" class="col-sm-2 control-label">Target Date</label>
                            <div class="col-sm-10">
                                <div class="input-group">
                                    <input name="targetDate" type="text" class="form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn">
                                                        <button type="button" class="btn btn-default" ng-click="vm.open($event)">
                                                            <i class="glyphicon glyphicon-calendar"></i>
                                                        </button>
                                                      </span> 
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /col-sm-10 -->
                        </div>
                        <!-- form group -->
                        <div class="form-group">
                            <div class="col-sm-2">
                                <input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="widget-foot">
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
</section>
</section>

感谢任何帮助

西蒙

Answer 1

这里有几件事可以帮助您：

列是由行包裹的。默认引导网格是 12 列的网格。

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

因此，考虑到这一点，您可以了解如何控制每行元素的放置。

就目前而言，您的最后一个 div 设置为 col-sm-10。此列包含您对目标日期的输入以及行为不端的按钮。

下面是用小提琴对您的麻烦区域进行的修改。您的 span 标签打开时间过长，并且缺少“表单控件”类。 http://jsfiddle.net/Levy0k2f/

<div class="form-group">
    <label for="targetDate" class="col-sm-2 control-label">Target Date</label>
    <div class="row">
        <div class="col-sm-3">
            <div class="input-group">
                <input name="targetDate" type="text" class="form-control form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn"></span> 
            </div>
        </div>
    <div class="col-sm-3">
        <button type="button" class="btn btn-default" ng-click="vm.open($event)">   <i class="glyphicon glyphicon-calendar"></i></button>
    </div>
</div>

修复按钮的更新，该按钮在 span 类之外。

http://jsfiddle.net/k0f598hr/

<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="vm.open($event)">
        <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>