html - 当屏幕尺寸较小时，我可以使用 Bootstrap 使 Label 左对齐吗？

Question

我对 Bootstrap 还很陌生。我正在尝试使用以下 Razor 代码布置表单:

    <div class="form-group">
        <div class="col-md-12">
            <div class="col-md-3">
                @Html.Label("Work Order Type", new { @class = "form-control control-label" })
            </div>
            <div class="col-md-4">
                @Html.DropDownListFor(m => m.Step2.WorkOrderType, Model.Step2.WorkOrderTypeList, new { @class = "form-control" })
            </div>
            <div class="col-md-2">
                @Html.Label("Site", new { @class = "form-control control-label" })
            </div>
            <div class="col-md-3">
                @Html.DropDownListFor(m => m.Step2.Site, Model.Step2.SiteList, new { @class = "form-control" })
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-md-3">
                @Html.Label("Billing Account", new { @class = "form-control control-label" })
            </div>
            <div class="col-md-4">
                @Html.DropDownListFor(m => m.Step2.BillingAccount, Model.Step2.BillingAccountList, new { @class = "form-control" })
            </div>
            <div class="col-md-2">
                @Html.Label("Priority", new { @class = "form-control control-label" })
            </div>
            <div class="col-md-3">
                @Html.DropDownListFor(m => m.Step2.Priority, Model.Step2.PriorityList, new { @class = "form-control" })
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-md-3">
                @Html.Label("Require Signature?", new { @class = "form-control control-label" })
            </div>
            <div class="col-md-2">
                @Html.CheckBoxFor(m => m.Step2.ReqSignature, new { @class = "checkbox" })
            </div>
        </div>
    </div>

问题是，当我调整屏幕大小时，表单项下拉到标签下方，但标签保持右文本对齐。一旦屏幕变小或变小，是否有某种方法可以将对齐方式更改为左对齐？

Answer 1

基本上，您可以检查屏幕的大小，然后根据需要对齐文本。 Twitter bootstrap 有 3 个媒体查询:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

因此，您可以按照以下方式进行操作:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
   .control-label{
      text-align: left; 
  }
}

您可以查看有关网格系统的更多详细信息，Media queries .