html - Bootstrap v2 模板在小显示器上不起作用，在大显示器上没问题。使用什么代替类 "col-sm-3"

Question

这是我的网页搜索模板。我正在使用 Bootstrap 。在大屏幕上一切正常，但现在在小屏幕上。如何为 child 子修复它？

我正在使用 bootsrap2 和类“span3”。在 bootstrap3 中，我可以使用“col-sm-3”，但在第 2 版中不存在。我能做什么？

<div class="well">
    <div class="row-fluid">
        <div class="span3">
            <div class="form-group">
                @Html.LabelFor(x => x.FirstNameAndLastName, new { @class = "control-label" })
                @Html.TextBoxFor(x => x.FirstNameAndLastName, new { @class = "input-xlarge focused" })
            </div>
            <div class="form-group">
                @Html.LabelFor(x => x.SelectedWorkCatgoryId, new { @class = "control-label" })
                @Html.DropDownListFor(x => x.SelectedWorkCatgoryId, Model.ViewModel.WorkCategories, Translations.Global.SELECT, new { @data_rel = "chosen", @class = "dropdown-input-xlarge" })
            </div>
        </div>
        <div class="span3">
            <div class="form-group">
                @Html.LabelFor(x => x.WorkNumber, new { @class = "control-label" })
                @Html.TextBoxFor(x => x.WorkNumber, new { @class = "input-xlarge focused" })
            </div>
            <div class="form-group">
                @Html.LabelFor(x => x.SelectedStudentCategoryId, new { @class = "control-label" })
                @Html.DropDownListFor(x => x.SelectedStudentCategoryId, Model.ViewModel.WorkTypes, Translations.Global.SELECT, new { @data_rel = "chosen", @class = "dropdown-input-xlarge" })
            </div>
        </div>
        <div class="span3">
            <div class="form-group">
                @Html.LabelFor(x => x.WorkStartOn, new { @class = "control-label" })
                @Html.TextBoxFor(x => x.WorkStartOn, new { @id = "workdStartOn", @datepicker = true, @class = "input-xlarge focused datepicker" })
            </div>
            <div class="form-group">
                @Html.LabelFor(x => x.SelectedWorkType, new { @class = "control-label" })
                @Html.DropDownListFor(x => x.SelectedWorkType, Model.ViewModel.WorkTypes, Translations.Global.SELECT, new { @data_rel = "chosen", @class = "dropdown-input-xlarge" })
            </div>
        </div>

        <div class="span3">
            <div class="form-group">
                @Html.LabelFor(x => x.WorkEndOn, new { @class = "control-label" })
                @Html.TextBoxFor(x => x.WorkEndOn, new { @id = "workdEndOn", @datepicker = true, @class = "input-xlarge focused datepicker" })
                <button class="btn btn-primary pull-right" type="submit" id="submitBttn">
                    <i class="fa fa-search"></i> @Translations.Global.SEARCH
                </button>
            </div>
        </div>
    </div>
</div>  

图片:

没关系

这不行

Answer 1

.span3"的宽度固定为 270px。您可能想要添加“.row-fluid”，这将为您提供大约 23% 的 span3 宽度。

您可以在此处下载完整的 bootstrap 2 压缩文件:http://getbootstrap.com/2.3.2/阅读未压缩的 CSS 可能会回答您的更多问题。

希望对您有所帮助!