Bootstrap4 beta中列的顺序不正确 [英] incorrect ordering of columns in Bootstrap4 beta
本文介绍了Bootstrap4 beta中列的顺序不正确的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想根据屏幕尺寸以不同顺序显示列.
I want to display columns in different orders depending on the size of the screen.
1)对于MD或更大尺寸，我想在单行中显示S，M，L，XL(3行/行)1)对于sm或更小，我想每行显示两列，但还想对内容重新排序，以XL，L排成一行，M，S排成下一行
1) For MD or larger, I want to display S,M,L,XL in a single row (3 cols/row) 1) For sm or smaller, I want to display two columns per row but also want to re-order the content, starting with XL, L in one row and M,S in next
- XL |L-忽略项目符号，尝试显示2x2表格
- M |S
以下是我的代码，但无法正常工作.
Following is my code but it isn't working correctly.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta-name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<title>My Photo</title>
<style> <!-- debug border -->
.my-border {
border:solid;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row"> <!-- irrelevant for this problem -->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 my-border">
<div class="alert alert-success">
Hello World
</div>
</div>
</div>
<div class="row">
<!-- I suppose, for xs and sm, I'll get 2 cols (col-xs-6), for md or larger, I'll get 4 cols (col-md-3). order-xs-6 will move this column to col 6 and order-md-1 will keep it in column 1 -->
<div class="col-xs-6 col-md-3 order-xs-6 order-md-1 my-border">
<div class="row">
<div class="col-md-12"><h5>Small</h5></div>
</div>
<div class="row"> <!-- nesting irrelevant for this problem -->
<div class="col-md-4">sm1</div>
<div class="col-md-4">sm2</div>
<div class="col-md-4">sm3</div>
</div>
</div>
<div class="col-xs-6 col-md-3 order-xs-1 order-md-3 my-border">
<div class="row">
<div class="col-md-12"><h5>Medium</h5></div>
</div>
<div class="row">
<div class="col-md-4">md1</div>
<div class="col-md-4">md2</div>
<div class="col-md-4">md3</div>
</div>
</div>
<div class="col-xs-6 col-md-3 order-xs-6 order-md-6 my-border">
<div class="row">
<div class="col-md-12"><h5>Large</h5></div>
</div>
<div class="row">
<div class="col-md-4">lg1</div>
<div class="col-md-4">lg2</div>
<div class="col-md-4">lg3</div>
</div>
</div>
<div class="col-xs-6 col-md-3 order-xs-1 order-md-9 my-border">
<div class="row">
<div class="col-md-12"><h5>X-Large</h5></div>
</div>
<div class="row">
<div class="col-md-4">xl1</div>
<div class="col-md-4">xl2</div>
<div class="col-md-4">xl3</div>
</div>
</div>
</div>
</div>
<div>I am free</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/popper.js/dist/umd/popper.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
推荐答案
选中此项.我删除了 col-xs (无效)，因为它只是 col .我还清理了您的一些班级(其中有些是不必要的).
Check this. I've removed col-xs (invalid) as it is just col. I've also cleaned some of your classes (some of them were unnecessary).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
<div class="row"> <!-- irrelevant for this problem -->
<div class="col my-border">
<div class="alert alert-success">
Hello World
</div>
</div>
</div>
<div class="row">
<!-- I suppose, for xs and sm, I'll get 2 cols (col-xs-6), for md or larger, I'll get 4 cols (col-md-3). order-xs-6 will move this column to col 6 and order-md-1 will keep it in column 1 -->
<div class="col-6 col-md-3 order-4 order-md-1 my-border">
<div class="row">
<div class="col"><h5>Small</h5></div>
</div>
<div class="row"> <!-- nesting irrelevant for this problem -->
<div class="col-md-4">sm1</div>
<div class="col-md-4">sm2</div>
<div class="col-md-4">sm3</div>
</div>
</div>
<div class="col-6 col-md-3 order-3 order-md-2 my-border">
<div class="row">
<div class="col"><h5>Medium</h5></div>
</div>
<div class="row">
<div class="col-md-4">md1</div>
<div class="col-md-4">md2</div>
<div class="col-md-4">md3</div>
</div>
</div>
<div class="col-6 col-md-3 order-2 order-md-3 my-border">
<div class="row">
<div class="col"><h5>Large</h5></div>
</div>
<div class="row">
<div class="col-md-4">lg1</div>
<div class="col-md-4">lg2</div>
<div class="col-md-4">lg3</div>
</div>
</div>
<div class="col-6 col-md-3 order-1 order-md-4 my-border">
<div class="row">
<div class="col"><h5>X-Large</h5></div>
</div>
<div class="row">
<div class="col-md-4">xl1</div>
<div class="col-md-4">xl2</div>
<div class="col-md-4">xl3</div>
</div>
</div>
</div>
</div>
<div>I am free</div>询问您是否想对我已更改的事情进行澄清！
这篇关于Bootstrap4 beta中列的顺序不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
