<分区>
<分区>
我想创建一个如下所示的分页组件:
在宽屏幕上:
| |
| [<<] 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">
««« [A]
</div>
<div class="col-md-3 col-xs-6 order-md-3 order-xs-3 text-right">
»»» [C]
</div>
</div>
</div>
代码笔:https://codepen.io/nonZero/pen/XZaxBR
但在窄屏幕上我得到的是:
| |
| Page # 1 of 6 |
| [<<] |
| [>>] |
| |
(编辑:固定 xs-12 和 xs-6 在原始帖子中混合，但问题仍然悬而未决。)
最佳答案
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">
««« [A]
</div>
<div class="col-6 col-md-3 text-right">
»»» [C]
</div>
</div>
</div>(注意:text-left 是不必要的，因为这是默认设置。)
此外，order-first 类的使用允许取消 order-1 和 order-2 类。
关于html - Bootstrap 4 : Displaying 3 columns in two rows on narrow screens，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48783052/