时间戳

首页 > 解决方案 > 使用 Bootstrap 列表组在中间休息时水平移动

html - 使用 Bootstrap 列表组在中间休息时水平移动

问题描述

使用 Bootstrap，我想在大型设备上垂直显示一个列表，然后在中等断点上水平显示。我可以看到如何以相反的方式进行操作，但在此方面找不到任何东西。我该怎么做？

标签： htmlcsstwitter-bootstraphtml-lists

解决方案

你可以给 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>

推荐阅读