html - 在最大屏幕尺寸下将列从 12 增加到 16
问题描述
对于一个项目,我需要有 7 或 8 列,具体取决于引导程序 4 中最大屏幕尺寸的要求,即大于 1200 像素。对于低于 1200 像素的 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>
您还可以使用标准网格布局并在宽屏幕上定义三列,然后为这些列每列分配 6 列 (3 * 6 = 18)。这三列可以在较小的屏幕上全屏显示)。
推荐阅读
- java - 将 Spring Boot 属性 Bean 传递给其他项目中的类
- c++ - 忽略由 3rd 方标头引起的 [clang-diagnostic-error] clang-tidy
- graphdb - 擦除 GraphDB 中的存储库后重建自动完成索引
- ruby - Ruby:TDD 加编码
- android - 数据库问题
- python - Python AsyncIO 中的异步生成器的产量
- python - Python-workfront 无法从搜索中检索值
- java - 从 HDFS 流式传输文件与将其复制到本地磁盘
- excel - 根据数据集在新表中显示单元格
- php - 在webview中将网页从服务器重定向到android