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。

使用Bootstrap时，如果屏幕尺寸较小，我可以将标签左对齐吗？

1 个答案: