css - Bootstrap Input Group 将控件向左推一点

Question

我正在尝试使用 bootstrap 3 布局表单，但由于某种原因，输入被推到了左边。我的标记看起来像这样

<div class="jumbotron">

<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">


    <div class="form-group">
        <label class="control-label col-sm-3" for="txt_job_date"  >Date work performed</label>
        <p class="input-group col-sm-3">
            <input type="text"
                   class="form-control"
                   datepicker-popup="{{format}}" ng-model="dt"
                   is-open="opened" min-date="minDate"
                   max-date="'2015-06-22'"
                   datepicker-options="dateOptions"
                   date-disabled="disabled(date, mode)"
                   ng-required="true"
                   close-text="Close"
                   id="txt_job_date"
                   ng-model="job_date"
                    />
            <span class="input-group-btn">
                &nbsp;&nbsp;<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
        </p>
    </div>


    <div class="form-group">
        <label class="control-label col-sm-3" for="txt_job_ref_no" required-asterix="" >Ref No</label>
        <div class="col-sm-2">
            <input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
        </div>
        <div role="alert">
        <span class="error has-error alert-danger" ng-show="invoiceForm.txt_job_ref_no.$error.required">
            Ref no is required!</span>
        </div>
    </div>
</form>
</div>

Here is the link to fiddle

非常感谢!

Answer 1

这应该有所帮助。将标签和元素包装在 cols 中，并将表单包装在 .jumbotron 内的 .container 中。您使布局过于复杂。

<div class="jumbotron">
<div class="container">
    <form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">

        <div class="col-sm-12">
        <div class="form-group">
            <label class="control-label" for="txt_job_date">Date work performed</label>
            <div class="input-group">
                <input type="text"
                       class="form-control"
                       datepicker-popup="{{format}}" ng-model="dt"
                       is-open="opened" min-date="minDate"
                       max-date="'2015-06-22'"
                       datepicker-options="dateOptions"
                       date-disabled="disabled(date, mode)"
                       ng-required="true"
                       close-text="Close"
                       id="txt_job_date"
                       ng-model="job_date"
                        />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </div>
        </div>
        </div>
        <div class="col-sm-12">
        <div class="form-group">
            <label class="control-label" for="txt_job_ref_no" required-asterix="" >Ref No</label>

                <input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">


        </div>
        </div>
        </form>
    </div>
</div>

http://jsfiddle.net/j8x15dbs/1/

---

编辑:遗漏了关于表格是水平的部分。在下面添加了新代码以反射(reflect)这一点。

这有你要找的布局

<div class="jumbotron">
<div class="container">
<form class="form-horizontal">

<div class="form-group">
    <label class="control-label col-sm-3" for="txt_job_date">Date work performed</label>
    <div class="col-sm-7">
        <div class="input-group">
                <input type="text"
                    class="form-control"
                    datepicker-popup="{{format}}" ng-model="dt"
                    is-open="opened" min-date="minDate"
                    max-date="'2015-06-22'"
                    datepicker-options="dateOptions"
                    date-disabled="disabled(date, mode)"
                    ng-required="true"
                    close-text="Close"
                    id="txt_job_date"
                    ng-model="job_date"
                />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
        </div>
    </div>
</div>


<div class="form-group">
    <label class="col-sm-3 control-label" for="txt_job_ref_no" required-asterix="">Ref No</label>
    <div class="col-sm-7">
        <input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="required">
    </div>
</div>


</form>
</div>
</div>

http://jsfiddle.net/j8x15dbs/2/

一个真正容易做的事情——也是一个很好的学习方法——就是从 Bootstrap 的网站上复制示例，然后用你的值替换它们的值。 :)