Question

我希望根据屏幕大小显示不同顺序的列。

1）对于MD或更大，我想在一行中显示S，M，L，XL（3列/行） 1）对于sm或更小，我想每行显示两列，但也想重新排序内容，从XL开始，L在一行中，L，M，S在下一行

XL | L - 忽略子弹，试图显示2x2表
M |小号

以下是我的代码但它无法正常工作。

<!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>

Answer 1

检查一下。我已删除col-xs（无效），因为它只是 col 。我还清理了你的一些课程（其中一些是不必要的）。

＆＃13;

<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>

＆＃13;

询问您是否希望对我已更改的内容进行任何澄清！

Bootstrap4 beta中列的排序不正确

1 个答案: