表格组div

时间:2017-05-29 23:36:35

标签: twitter-bootstrap twitter-bootstrap-3

我正在尝试清理一个非常强大的布局,它在AngularJs应用程序中使用Bootstrap 3和标签。

我非常熟悉大多数Bootstrap规则(例如嵌套行等),但有一种我尚未见过的组合。请采用以下代码段

<div class="tab-pane ng-scope active" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab">
    <div class="tab-top-buffer ng-scope">
        <div class="row">
            <ng-form name="patientDetailsForm" class="ng-pristine ng-invalid ng-invalid-required ng-valid-minlength ng-valid-maxlength ng-valid-date">
                <div class="col-md-9">
                    <div class="row">
                        <div class="form-group">
                            <span>&nbsp;<i class="fa fa-question-circle" title="Enter the first three letters of the patient’s surname"></i></span>
                            <label for="name" class="control-label">Name:</label>
                            <span>&nbsp;<i class="fa fa-asterisk text-danger"></i></span>
                            <input type="text" id="name" name="name" required="" placeholder="Enter given name" ng-model="editModel.breastData.episode.patient.name" ng-minlength="2" ng-maxlength="3" class="ng-pristine form-control ng-valid-minlength ng-valid-maxlength ng-not-empty ng-valid ng-valid-required ng-touched">
                        <!-- ngIf: patientDetailsForm.name.$invalid && patientDetailsForm.name.$touched --></div>
                    </div>

                    <div class="row">
                        <div class="form-group">
                            <span>&nbsp;<i class="fa fa-question-circle" title="Enter the patient’s date of birth as day, month and four digit year of birthdate to be separated by a forward slash (/)."></i></span>
                            <label for="dob" class="control-label">DOB:</label>
                            <span>&nbsp;<i class="fa fa-asterisk text-danger"></i></span>
                            <div class="input-group">
                                <input type="text" id="dob" name="dob" class="form-control ng-pristine ng-untouched ng-isolate-scope ng-not-empty ng-valid-date ng-valid ng-valid-required" uib-datepicker-popup="dd-MM-yyyy" alt-input-formats="altInputFormats" ng-model="$parent.$parent.dob" is-open="dobPopup.opened" datepicker-options="dobDateOptions" ng-required="true" close-text="Close" ng-change="$parent.$parent.validateDob()" placeholder="DD-MM-YYYY" required="required"><div uib-datepicker-popup-wrap="" ng-model="date" ng-change="dateSelection(date)" template-url="uib/template/datepickerPopup/popup.html" class="ng-pristine ng-untouched ng-valid ng-scope ng-not-empty"><!-- ngIf: isOpen -->
    </div>
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default" ng-click="openDobPopup()"><i class="fa fa-calendar"></i></button>
                                </span>
                            </div>
                            <!-- ngIf: patientDetailsForm.dob.$invalid && patientDetailsForm.dob.$touched -->
                        </div>
                    </div>

将网格维度添加到包含form-group类的div是否合法(更糟糕的做法)。例如。

<div class="row">
    <div class="form-group col-md-4 col-md-offset-4"> ...

它似乎有效,但感觉不对。我只想寻求澄清,看看这实际上是不是一个坏主意,在这种情况下,我可能不得不创建一个包装div。

由于

0 个答案:

没有答案