javascript - 输入组 btn 从字段右侧 float

Question

无论屏幕宽度如何，targetDate 元素的 input-group-btn 都固定在输入组的右侧，直到我添加热毛巾生成器附带的自动生成的 CSS。 我需要一些帮助来确定 CSS 的哪些方面影响了行为。

看看这个 jsfiddle
尝试了所有 3 种尺寸的网格布局都无济于事，但我认为这不是问题所在。

<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  id="submitjobform" ng-submit="vm.processForm()">
                    <div class="form-group">
                        <div class="row">
                            <label for="name" class="col-lg-2 control-label">Name</label>
                            <div class="col-lg-10">
                                <input ng-model="vm.submitjobform.name" type="text" class="form-control" name="name" ng-required="true" >
                                <span class="error" ng-show="submitjobform.name.$error.required">Required!</span>
                            </div> <!--  </div>  col-lg-10 -->
                        </div> <!--  </div>  row -->
                   </div> <!--  </div>  form-group -->
                   <div class="form-group">
                        <div class="row">
                            <label for="description" class="col-lg-2 control-label">Description</label>
                            <div class="col-lg-10">
                                <textarea  ng-model="vm.submitjobform.description" class="form-control" name="description" ng-required="true" ></textarea>
                                <span class="error" ng-show="submitjobform.description.$error.required">Required!</span>
                            </div> <!--  </div>  col-lg-10 -->
                        </div> <!--  </div>  row -->
                    </div> <!--  </div>  form-group -->  
                    <div class="form-group">
                        <div class="row">
                            <label for="category" class="col-lg-2 control-label">Category</label>
                            <div class="col-lg-10">
                                <select ng-model="vm.submitjobform.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>  col-lg-10 -->
                          </div> <!--  </div>  row -->
                    </div> <!--  </div>  form-group --> 
                    <div class="form-group">
                        <div class="row">
                            <label for="assignee" class="col-lg-2 control-label">Assignee</label>
                            <div class="col-lg-10">
                                <select ng-model="vm.submitjobform.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>  col-lg-10 -->
                            </div> <!--  </div>  row -->
                    </div> <!--  </div>  form-group -->
                     <div class="form-group">   
                        <div class="row">
                            <label for="targetDate" class="col-lg-2 control-label">Target Date</label>
                            <div class="col-lg-8">
                                <!-- <div class="col-lg-4"> -->
                                    <div class="input-group">
                                        <input name="targetDate" type="text" class=" form-control" datepicker-popup="{{vm.format}}" ng-model="vm.submitjobform.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"> 
                                        </input>
                                        <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-lg-4  -->
                            </div>  <!--/col-lg-8 -->
                        </div> <!--  </div>  row -->
                    </div> <!--  </div>  form-group -->     
                        <div class="form-group">
                            <div class="row">
                                <div class="col-lg-2">
                                    <input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
                                </div>  <!--/col-lg-2 -->
                            </div>
                        </div>
                        <div>
                        <tt>name = {{vm.submitjobform.name}}</tt><br/>
                        <tt>desc = {{vm.submitjobform.description}}</tt><br/>
                        <tt>category = {{vm.submitjobform.category.name}}</tt><br/>
                        <tt>assignee = {{vm.submitjobform.assignee.name}}</tt><br/>
                        <tt>targetdate = {{vm.submitjobform.targetDate}}</tt><br/>
                        </div>
                    </form>
                    </div> <!-- content-user div -->
                <div class="widget-foot">
                    <div class="clearfix"></div>    
                </div>
            </div> <!-- widget violet -->
            </div> <!-- row div -->
        </div> <!-- container div -->
    </section>
</section>

谢谢

西蒙

Answer 1

http://jsfiddle.net/voykuL65/

我假设您正在使用 bootstrap，因为您将它导入到您的 fiddle 的 css 中。

主要问题是您还没有包括 bootstrap JS。如果您删除 fiddle 中的 CSS 并将框架和扩展切换到 jquery 2.1 并选择 Bootstrap 3.2，您的代码看起来不错。

另一点要记住的是设计 Bootstrap 总是最小的。

你已经拥有了一切

class="col-lg-2" 

您可能只是在修修补补，但请记住从 xs/sm 开始并移动得更大。

还有一只流浪的</input>把他也杀了。