Question

我想创建一个看起来像这样的分页组件：

在宽屏幕上：

|                                                       | 
| [<<]                Page # 1 of 6                [>>] |
|                                                       |

在狭窄的屏幕上：

|                      |
|    Page # 1 of 6     | 
| [<<]            [>>] |
|                      |

我尝试了以下内容：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xs-12 order-md-2 order-xs-1 text-center">
      blah blah blah [B]
    </div>
    <div class="col-md-3 col-xs-6 order-md-1 order-xs-2 text-left">
      &laquo;&laquo;&laquo; [A]
    </div>
    <div class="col-md-3 col-xs-6 order-md-3 order-xs-3 text-right">
      &raquo;&raquo;&raquo; [C]
    </div>
  </div>
</div>

Codepen：https://codepen.io/nonZero/pen/XZaxBR

但是在狭窄的屏幕上，我得到了这个：

|                      |
|    Page # 1 of 6     | 
| [<<]                 |
|                 [>>] |
|                      |

（编辑：已修复xs-12和xs-6在原帖中混合，但问题仍然存在。）

Answer 1

Bootstrap 4中没有col-xs-*个类（不再）。它们已被替换为col-*：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-6 text-center">
            blah blah blah [B]
        </div>
        <div class="col-6 col-md-3 order-md-first">
            &laquo;&laquo;&laquo; [A]
        </div>
        <div class="col-6 col-md-3 text-right">
            &raquo;&raquo;&raquo; [C]
        </div>
    </div>
</div>

（注意：text-left是不必要的，因为这是默认值。）

此外，使用order-first类可以取消order-1和order-2类。

Answer 2

已更新 - 已在Bootstrap 4中删除了col-xs- *。请改用col- *。

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-md-6  order-md-2 order-xs-1 text-center">
      blah blah blah [B]
    </div>
    <div class="col-sm-6 col-md-3 col-6 order-md-1 order-xs-2 text-left">
      &laquo;&laquo;&laquo; [A]
    </div>
    <div class="col-sm-6 col-md-3 col-6 order-md-3 order-xs-3 text-right">
      &raquo;&raquo;&raquo; [C]
    </div>
  </div>
</div>

演示：https://codepen.io/anon/pen/PQKxOZ

Bootstrap4：在窄屏幕上显示两行中的3列

2 个答案: