Question

我使用bootstrap列创建了一个html表单来获得所需的布局。这是我想要它用于桌面的地方，但它在移动设备上堆积在一起。我不相信我使用过的任何代码都是使用bootstrap。这是表单本身：

    <div class="center_div">
        <div class="row">
            <div class="form-group col-xs-5">
                <h3>First Name</h3>
                <input name="fName" type="text" />

            </div>
            <div class="form-group col-xs-5">
                <h3>Last Name</h3>
                <input name="lName" type="text" />

            </div>
        </div>
        <div class="row">
            <div class="form-group col-xs-5">
                <h3>Company Name</h3>
                <input name="compName" type="text" />

        </div>
        <div class="form-group col-xs-5">
            <h3>Business Type</h3>
            <select class="form-control" style="width: 100%;" name="businessNeeds">
                <option value="">Select...</option>
                <option value="IntDesign">Interior Designer</option>
                <option value="Ecom">E-Commerce Only</option>
                <option value="Retail">Retail Store Only</option>
                <option value="RetailEcom">Retail and E-Commerce</option>
                <option value="Mult">Multiple Locations</option>
            </select>

        </div>
    </div>
    <div class="row">
        <div class="col-xs-10">
            <div class="input-group input-group-xs">
                <h3>Address</h3>
                <input class="form-control input-lg" name="address" type="text" />

            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-xs-5">
            <h3>City</h3>
            <input name="city" type="text" />

        </div>
        <div class="form-group col-xs-2">
            <h3>State</h3>
            <select name="state">
                <option value="">Select...</option>
                /*Took out states for space*/
            </select>

        </div>
        <div class="form-group col-xs-3">
            <h3>Zip</h3>
            <input name="zip" type="text" />

        </div>
    </div>
    <div class="row">
        <div class="form-group col-xs-5">
            <h3>Phone</h3>
            <input name="phone" type="text" />

        </div>
        <div class="form-group col-xs-5">
            <h3>Email</h3>
            <input id="email" name="uemail" type="text" />

        </div>
    </div>
    <div class="row">
        <div class="form-group col-xs-4">
            <h3>Create a Username</h3>
            <input name="uname" type="text" />

        </div>
        <div class="form-group col-xs-3">
            <h3>Create a Password</h3>
            <input class="form-control" style="width: 100%;" name="pass" type="password" />

        </div>
        <div class="form-group col-xs-3">
            <h3>Confirm Password</h3>
            <input class="form-control" style="width: 100%;" name="ConfPass" type="password" />

        </div>
    </div>
    <div class="row">
        <div class="form-group col-xs-5">
            <h3>Sales Tax ID</h3>
            <input name="taxID" type="text" />

        </div>
        <div class="form-group col-xs-5">
            <h3>Upload Tax ID Certificate</h3>
            <input name="fileUpload" type="file" />

        </div>
    </div>
    <div class="buttonHolder">
        <input type="submit" value="Submit" /></div>
    </div>
</form>

CSS：

.center_div{
    padding-left:150px;
    position:relative;
    width:100%;
    margin:0 auto;
}

@media only screen and (max-width: 600px){
    .mainForm{

}

.center_div{

    width:100%;
    margin:0 0 15px 0;
}

.center_div label{
    width:100%;
    float: none;
    margin:0 0 5px 0;
}

.mainForm是表单周围的空白div，页面上没有其他内容。我留下了CSS漂亮的准系统，但是有一个相当简单的方法可以使用bootstrap在移动设备上做出更好的响应吗？即使所有的领域都只是彼此重叠。

Answer 1

所有引导行必须位于.container div中，否则它们将无法按预期工作。

为了在较小的屏幕上堆叠表单元素并且在较大的分辨率上具有（比方说）两列（每个，实际上是6个网格列），您需要将两个类应用于cols。

<div class="form-group col-xs-12 col-sm-6">

基本上你告诉bootstrap从元素上的最小分辨率（xs）应该跨越12个网格列，而对于元素上的小分辨率（sm）应该跨越6个网格列。

在this codepen上我添加了这些类，以便您可以看到解决方案正常运行。希望它有所帮助。

Bootstrap HTML表单，没有响应

1 个答案: