分类导航

程序问答发布时间：2022-06-01 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了在最大屏幕尺寸下将列从 12 增加到 16，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决在最大屏幕尺寸下将列从 12 增加到 16？

开发过程中遇到在最大屏幕尺寸下将列从 12 增加到 16的问题如何解决？下面主要结合日常开发的经验，给出你关于在最大屏幕尺寸下将列从 12 增加到 16的解决方法建议，希望对你解决在最大屏幕尺寸下将列从 12 增加到 16有所启发或帮助；

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

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

解决方法

您将无法拥有两组 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>