Question

尝试使用bootstraps col尺寸（xs，sm，md，lg）来更好地设置我拥有的大型表单因为所有列都比他们应该更早地切换到大型。即xs约为615px而非7 sm sm至md约800px而不是992px md至lg约960px而不是1200px。

我正在使用react-bootstrap v0.31.0（advanced-rest-client）

此图片中的屏幕宽度为968像素。我一直在开发人员模式下使用Chrome进行测试，屏幕大小在“响应”状态下。部分。 link

关于我做错了什么或可能需要改变的任何想法？

HTML部分：

    <div>
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
        <div class="form-group form-group-sm has-feedback">
            <label for="FirstName" class="col-xs-12 control-label"><strong>*</strong>
                <!-- react-text: 1261 -->
                <!-- /react-text -->
                <!-- react-text: 1262 -->First Name:
                <!-- /react-text --><i class="fa fa-lg fa-info-circle fa-fw"></i>
            </label>
            <div class="col-xs-12">
                <input type="text" placeholder="Enter First Name" name="FirstName" value="John" id="FirstName" class="form-control" style="padding-bottom: 15px;">
                <!-- react-empty: 1266 -->
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
        <div class="form-group form-group-sm has-feedback">
            <label for="MiddleName" class="col-xs-12 control-label">
                <!-- react-text: 1270 -->
                <!-- /react-text -->
                <!-- react-text: 1271 -->Middle Name or initial:
                <!-- /react-text --><i class="fa fa-lg fa-info-circle fa-fw"></i>
            </label>
            <div class="col-xs-12">
                <input type="text" placeholder="Enter Middle Name or Initial" name="MiddleName" value="W" id="MiddleName" class="form-control" style="padding-bottom: 15px;">
                <!-- react-empty: 1275 -->
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
        <div class="form-group form-group-sm has-feedback">
            <label for="LastName" class="col-xs-12 control-label"><strong>*</strong>
                <!-- react-text: 1280 -->
                <!-- /react-text -->
                <!-- react-text: 1281 -->Last Name:
                <!-- /react-text --><i class="fa fa-lg fa-info-circle fa-fw"></i>
            </label>
            <div class="col-xs-12">
                <input type="text" placeholder="Enter Last Name" name="LastName" value="Doe" id="LastName" class="form-control" style="padding-bottom: 15px;">
                <!-- react-empty: 1285 -->
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
        <div class="form-group form-group-sm has-feedback">
            <label for="FormerName" class="col-xs-12 control-label">
                <!-- react-text: 1289 -->
                <!-- /react-text -->
                <!-- react-text: 1290 -->Former Name:
                <!-- /react-text --><i class="fa fa-lg fa-info-circle fa-fw"></i>
            </label>
            <div class="col-xs-12">
                <input type="text" placeholder="Enter Former Name" name="FormerName" value="" id="FormerName" class="form-control" style="padding-bottom: 15px;">
                <!-- react-empty: 1294 -->
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
        <div class="form-group form-group-sm has-feedback">
            <label for="Gender" class="col-xs-12 control-label">
                <!-- react-text: 1298 -->
                <!-- /react-text -->
                <!-- react-text: 1299 -->Gender:
                <!-- /react-text --><i class="fa fa-lg fa-info-circle fa-fw"></i>
            </label>
            <div class="col-sm-12 col-xs-12">
                <div class="Select Select--single is-clearable is-searchable has-value">
                    <input type="hidden" name="Gender" value="Male">
                    <div class="Select-control"><span class="Select-multi-value-wrapper" id="react-select-5--value"><div class="Select-value"><span class="Select-value-label" role="option" aria-selected="true" id="react-select-5--value-item">Male</span>
                    </div>
                    <div class="Select-input" style="display: inline-block;">
                        <input role="combobox" aria-expanded="false" aria-owns="" aria-haspopup="false" aria-activedescendant="react-select-5--value" value="" style="width: 5px; box-sizing: content-box;">
                        <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre;"></div>
                    </div>
                    </span><span class="Select-clear-zone" title="Clear value" aria-label="Clear value"><span class="Select-clear">×</span></span><span class="Select-arrow-zone"><span class="Select-arrow"></span></span>
                </div>
            </div>
            <!-- react-empty: 1313 -->
        </div>
    </div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
    <div class="form-group form-group-sm has-feedback">
        <label for="Dob" class="col-xs-12 control-label"><strong>*</strong>
            <!-- react-text: 1318 -->
            <!-- /react-text -->
            <!-- react-text: 1319 -->Date of Birth:
            <!-- /react-text --><i class="fa fa-lg fa-info-circle fa-fw"></i>
        </label>
        <div class="col-xs-12">
            <div class="react-datepicker__input-container">
                <input type="text" id="Dob" name="Dob" placeholder="Enter date of birth" class="form-control" value="10011987">
            </div>
            <!-- react-empty: 1324 -->
        </div>
    </div>
</div>
</div>

Answer 1

我知道有点晚了。但是请检查您是否以100％的视图查看您的网站。这让我忘记了。使用：ctrl +（+/-）可以调整视图，或者在Chrome浏览器中有放大镜图标。

由lg col覆盖的Bootstrap md col

1 个答案: