Question

我有一个面板体如下，我想对齐所有标签 - 文本。我在右侧标签课上做过但似乎并没有专门用于年份控制。

CSS

.form-inline.row{
    margin-top: 0px;
}

.form-inline label {
     /*text-align:right;*/
}
.form-group.row {
    margin-left: 0px;
}
.right-label {
    text-align:right;
}

MARKUP

         <div class="panel-body">
                <div class="form-inline row">
                    <div class="form-group col-md-4">
                        <div class="col-md-3 right-label">
                            @Html.Label("Year:")
                            </div>
                            <div class="col-md-9">
                                @Html.DropDownListFor(m => m.YearList, new SelectList(Model.YearList, "Value", "Text"))
                            </div>
                    </div>
                    <div class="form-group col-md-6">
                        <div class="col-md-4 right-label">
                            @Html.Label("Indicator Group:")
                        </div>
                            <div class="col-md-8">
                                @Html.DropDownListFor(m => m.IndicatorGroups, new SelectList(Model.IndicatorGroups, "Value", "Text"))
                            </div>
                     </div>

                </div>
                <div class="form-inline row">
                    <div class="form-group col-md-4">
                        <div class="col-md-3 right-label">
                            @Html.Label("Classes:")
                        </div>
                            <div class="col-md-9">
                                <select id="classList" multiple="multiple">
                                    <optgroup label="Grade 1">
                                        <option value="1">1 A</option>
                                        <option value="2">1 B</option>
                                    </optgroup>
                                    <optgroup label="Grade 2">
                                        <option value="3">2 A</option>
                                        <option value="4">2 B</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                    <div class="form-group col-md-6">
                        <div class="col-md-4 right-label">
                            @Html.Label("Indicators:")
                        </div>
                            <div class="col-md-8">
                            <select id="indicatorList" multiple="multiple">
                                <optgroup label="General">
                                    <option value="1">Assissted Learning</option>
                                    <option value="2">ESL</option>
                                </optgroup>
                                <optgroup label="Allergies">
                                    <option value="3">Dairy</option>
                                    <option value="4">Eggs</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>    
                </div>
            </div>

SCRIPT

 jQuery(function ($) {
    $('#classList').multiselect({ enableClickableOptGroups: true });
    $('#indicatorList').multiselect({ enableClickableOptGroups: true });
 });

我的输出是：

我也可以删除代码中标签周围的div并使它们看起来一样 - 目前如果我删除它们它们与文本框重叠

bootstrap文本右对齐不起作用

0 个答案: