Bootstrap 实例</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

  <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>

  <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

​

​

​

<div class="container mt-3">

  <h2>垂直方向</h2>

  <p>.flex-column 类用于设置弹性子元素垂直方向显示。</p>

  <p>使用 .flex-sm|md|lg|xl|xxl-column 可以适应不同屏幕设置。重置浏览器查看效果。</p>

  <p><code>.flex-column</code>:</p>

  <div class="d-flex flex-column mb-3">

    <div class="p-2 bg-info">Flex item 1</div>

    <div class="p-2 bg-warning">Flex item 2</div>

    <div class="p-2 bg-primary">Flex item 3</div>