Question

实际上我正在尝试构建一个在桌面上有两行的表单。每行有两列。

这是代码：

<form class="form-horizontal">
<div class="row">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
</div>
<div class="row">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
</div>
</form>

当我尝试在平板电脑或智能手机上打开该表单时，我想将列显示为行：

row1 with col1 and col2 shall become two rows.
row2 with col3 and col4 shall become two rows.

如何设置？

Answer 1

您需要使用col-md-6课程代替col-xs-6作为md目标中等大小的屏幕及以上。默认情况下，Twitter Bootstrap是移动优先响应式框架，因此它将占用较小屏幕的全宽，即低于md屏幕尺寸。

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
  <div class="row">
    <div class="col-md-6">1</div>
    <div class="col-md-6">2</div>
  </div>
  <div class="row">
    <div class="col-md-6">3</div>
    <div class="col-md-6">4</div>
  </div>
</form>

＆＃13;

Answer 2

<form class="form-horizontal">
<div class="row">
    <div class="col-lg-6 col-md-12"></div>
    <div class="col-lg-6 col-md-12"></div>
</div>
<div class="row">
    <div class="col-lg-6 col-md-12"></div>
    <div class="col-lg-6 col-md-12"></div>
</div>
</form>

这里我为multisize设备设置了两个类。在这里，您可以使用col-lg-6类在大屏幕中看到两列。

和col-md-12中型屏幕和Xtra小型设备（col-xs-12）中的一列

Bootstrap响应：如何使行中的列移动到只有小设备的行？

2 个答案: