使用 Bootstrap list-group 在中间中断处水平移动

Question

使用Bootstrap，我有一个列表，我想在大型设备上垂直显示，但随后在中断点上水平显示。我可以看到如何反过来做，但找不到任何东西。我该怎么做？

Answer 1

你可以给 ul 类 flex-row 和 flex-lg-column。查看代码段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
        <ul class="list-group flex-row flex-lg-column">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
        </ul>
</body>
</html>

使用 Bootstrap list-group 在中间中断处水平移动

Using Bootstrap list-group to go horizontal at the medium break

html

css

html-lists

twitter-bootstrap