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，并将表单放在.container内的.jumbotron内。你的布局太复杂了。

<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/

编辑：关于表格水平的错过的部分。在下面添加了新代码以反映这一点。

这有您正在寻找的布局

<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的网站上复制这些例子并用你的网站替换它们的值。：）

Answer 2

从输入标记之前删除numbers = [] while len(numbers) < 5: number = raw_input('Please input 5 numbers: ') if number.isdigit(): numbers.append(int(number)) #may want to use float here instead of int else: print "You entered something that isn't a number" search = raw_input('Search for the numer: ') if int(search) in numbers: print "Found it!"。作为良好做法，在使用<col-sm-2>之前始终使用<div class="row">，并且不要在<col-sm-12>

中使用行或列

请阅读bootstrap scaffolding以了解如何编写好的标记。

Bootstrap输入组将控制从左向左推

2 个答案: