在最大屏幕尺寸下将列从 12 增加到 16

Question

对于一个项目，我需要有 7 或 8 列，具体取决于引导程序 4 中最大屏幕尺寸的要求，即大于 1200 像素。对于低于 1200 像素的 12 列效果很好。

是否可以通过仅针对大屏幕更改默认引导 css 来拥有超过 12 列。

Answer 1

您将无法拥有两组 CSS 规则，一组用于小屏幕，另一组用于大屏幕，因为您需要告诉浏览器如何在较小的屏幕上显示 col-18。

您可以通过将 _variables.scss 中 $grid-columns 的值从 12 更改为 18 并编译您自己的自定义 CSS 文件来创建自定义 CSS 文件，然后使用正常的 Bootstrap 方法让列执行某些操作在较小的屏幕上有所不同。

以当前的 12 列网格为例，您可以为大屏幕定义 12（或 18）列，而为小屏幕定义相同的列为 2 或 3 宽。这将导致第二组列在较小的屏幕上环绕在第一组的下方。

如果数据不重要，您可以在较小的屏幕上隐藏多余的列。

下面是一个使用 12 列网格包装或隐藏列的快速示例：

.row-1 p {
  background-color: lavender;
}
.row-2 p {
  background-color: lightpink;
}
p {
  text-align: center;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<div class="container">
  <div class="row row-1">
    <div class="col-2 col-lg-1">
      <p>1</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>2</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>3</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>4</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>5</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>6</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>7</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>8</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>9</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>10</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>11</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>12</p>
    </div>
  </div>
  <div class="row row-2">
    <div class="col-2 col-lg-1">
      <p>1</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>2</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>3</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>4</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>5</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>6</p>
    </div>
    <div class="d-none d-lg-block col-lg-1">
      <p>7</p>
    </div>
    <div class="d-none d-lg-block col-lg-1">
      <p>8</p>
    </div>
    <div class="d-none d-lg-block col-lg-1">
      <p>9</p>
    </div>
    <div class="d-none d-lg-block col-lg-1">
      <p>10</p>
    </div>
    <div class="d-none d-lg-block col-lg-1">
      <p>11</p>
    </div>
    <div class="d-none d-lg-block col-lg-1">
      <p>12</p>
    </div>
  </div>
</div>

您还可以使用标准网格布局并在宽屏幕上定义三列，然后为这些列每列分配 6 列 (3 * 6 = 18)。这三列可以在较小的屏幕上全屏显示）。