更改手机上的引导程序布局

Question

我想在手机上更改模板的布局。 我的布局现在是

[2] [7] [3]

我希望将其更改为

[12]

[7] [5]

仅适用于手机。

np.where

我知道应该在sm和xs类上进行更改。 对此有何帮助？

Answer 1

您只需更改最小断点的列类（除非您尝试在不同的断点处执行此操作）：

col-sm-2 to col-xs-12和col-sm-3 to col-xs-5。

参见示例

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-2">
      <div class="alert alert-warning">2 to 12</div>
    </div>
    <div class="col-xs-7 col-sm-7">
      <div class="alert alert-info">7</div>
    </div>
    <div class="col-xs-5 col-sm-3">
      <div class="alert alert-danger">3 to 5</div>
    </div>
  </div>
</div>
<hr>

＆＃13;

＆＃13;

＆＃13;