html - Bootstrap Grid Columns - 导致布局不正确的 HTML 标签

Question

我有以下 html:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        @*@Html.LabelFor(s => s.BasicInfo.FirstName)*@<label>First Name:</label>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        @Html.TextBoxFor(s => s.BasicInfo.FirstName)
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        @*@Html.LabelFor(s => s.BasicInfo.LastName)*@<label>Last Name:</label>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        @Html.TextBoxFor(s => s.BasicInfo.LastName)
    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        @*@Html.LabelFor(s => s.BasicInfo.City)*@<label>City:</label>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        @Html.TextBoxFor(s => s.BasicInfo.City)
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        @*@Html.LabelFor(s => s.BasicInfo.State)*@<label>State:</label>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        @Html.TextBoxFor(s => s.BasicInfo.State)
    </div>
</div>

当我在 IE 或 Firefox 中打开页面时，“xs”、“md”和“lg”尺寸工作正常，但“sm”尺寸的布局不正确。如果我删除 <label>来自 html 的标签，所有尺寸都可以正常工作。这个 html/razor/css 有效吗？我在网上查找过将其他 html 元素放入列中的任何问题，但我无法想象会有任何问题。我试图包含一些屏幕截图，但它们没有显示，所以我删除了它们。

Answer 1

首先，您可以删除 .col-xs-12 和 .col-lg-3 并仍然具有相同的布局。

其次，代码看起来不错，但如果能看到完整的生成代码就好了。