Bootstrap CSS“Col”和 Col-md

问题描述 投票:0回答:1

我希望 col div 处于默认的 col 结构中,直到中等宽度,然后我希望它们下降到 col-md-4

我有 9 个列项目,我想将它们放在水平行中并占据行的整个宽度 然后在中号或小号之后坐成 3 排

我已经尝试过了 上校 col-md-4 col-md-4 col

到目前为止,只有 col-4 col-lg-1 可以工作,但不允许项目像“col”那样占据可用空间的整个宽度

这不可能吗?

bootstrap-4 col
1个回答
0
投票

您正在寻找的是:

  1. 中号或更小号有 3 列,所以
    col-4
  2. 中号之后的任何内容都是全宽,所以
    col-lg

所以,尝试:

col-4 col-lg
,你应该会得到你想要的结果。

一个小演示(也JSFiddle):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <div class="row">
        <div class="col-4 col-lg">
        1
        </div>
        <div class="col-4 col-lg">
        2
        </div>
        <div class="col-4 col-lg">
        3
        </div>
        <div class="col-4 col-lg">
        4
        </div>
        <div class="col-4 col-lg">
        5
        </div>
        <div class="col-4 col-lg">
        6
        </div>
        <div class="col-4 col-lg">
        7
        </div>
        <div class="col-4 col-lg">
        8
        </div>
        <div class="col-4 col-lg">
        9
        </div>
    </div>
  </body>
</html>

© www.soinside.com 2019 - 2024. All rights reserved.