Question

我想在笔记本电脑屏幕的网页上水平显示三个div，并使用bootstrap（响应式设计）在移动屏幕上垂直显示它们如何做到这一点？

这是代码

<div id="form1_container" class="container-fluid">
<form class="msform" id="form1">
<fieldset>
<h2 class="fs-title">Personal Details</h2>
        <h3 class="fs-subtitle">Step 1</h3>
        <input type="text" name="fName" placeholder="First Name" />
        <input type="text" name="lName" placeholder="Last Name" />
        <input type="text" name="email" placeholder="Email Address" />
        <input type="button" name="next" class="next action-button" value="Next" />

</fieldset>
</form></div>
<div id="form2_container"><form class="msform" class="container-fluid" id="form2">
<fieldset>
<h2 class="fs-title">Socia Profiles</h2>
        <h3 class="fs-subtitle">Step 2</h3>
        <input type="text" name="age" placeholder="Age" />
        <input type="text" name="country" placeholder="Country" />
        <input type="text" name="city" placeholder="City" />
        <input type="button" name="previous" class="previous action-

button" value="Previous" />
        <input type="button" name="next" class="next action-button" 

value="Next" />
</fieldset>
</form></div>

<div id="form3_container" class="container-fluid">
<form class="msform" id="form3"><fieldset>
<h2 class="fs-title">Create Your Account</h2>
        <h3 class="fs-subtitle">Step 3</h3>
        <input type="text" name="username" placeholder="UserName" />
        <input type="password" name="password" placeholder="password" />
        <input type="password" name="passwordC" placeholder="Confirm 

Password" />
        <input type="button" name="previous" class="previous action-

button" value="Previous" />
        <input type="submit" name="submit" class="submit action-button" 

value="Submit" />
</fieldset>
</form></div>


</div>

Answer 1

正如您在grid system Bootstrap中找到的那样：

Bootstrap包括一个响应式移动第一流体网格系统，随着设备或视口大小的增加，可以适当地扩展到12列。它包括用于简单布局选项的预定义类，以及用于生成更多语义布局的强大混合。

对于您的示例，您只需将class="col-lg-4"添加到<div>。

即可

提醒：不要忘记元视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如何使用bootstrap对齐三个div以满足响应性

1 个答案: