javascript - 如何管理引导 4 网格?
问题描述
实际上我有两个像col-md-6
& & 我在左侧和右侧col-md-6
有六个我只需要一个像下面给出的代码。images
images
这工作正常,但是当右侧图像不可用时,我需要将左六列扩展为全宽。我该怎么办?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-4" style="background-color:yellow;">img</div>
<div class="col-4" style="background-color:orange;">img</div>
<div class="col-4" style="background-color:blue;">img</div>
<div class="col-4" style="background-color:red;">img</div>
<div class="col-4" style="background-color:lime;">img</div>
<div class="col-4" style="background-color:indianred;">img</div>
</div>
</div>
<div class="col-6 p-0">
<div class="col-12" style="background-color:green; height:48px;">img</div>
</div>
</div>
</div>
col-md-6
如果权利不可用,我想要如下代码所示:-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-2" style="background-color:yellow;">img</div>
<div class="col-2" style="background-color:orange;">img</div>
<div class="col-2" style="background-color:blue;">img</div>
<div class="col-2" style="background-color:red;">img</div>
<div class="col-2" style="background-color:lime;">img</div>
<div class="col-2" style="background-color:indianred;">img</div>
</div>
</div>
</div>
</div>
答案将不胜感激!
解决方案
替换col-6
为col
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col-4" style="background-color:yellow;">img</div>
<div class="col-4" style="background-color:orange;">img</div>
<div class="col-4" style="background-color:blue;">img</div>
<div class="col-4" style="background-color:red;">img</div>
<div class="col-4" style="background-color:lime;">img</div>
<div class="col-4" style="background-color:indianred;">img</div>
</div>
</div>
<div class="col p-0">
<div class="col-12" style="background-color:green; height:48px;">img</div>
</div>
</div>
</div>
推荐阅读
- amazon-web-services - 项目构建错误:com.amazonaws:aws-java-sdk-secretsmanager:jar 的“dependencies.dependency.version”缺失
- php - 来自 PHP 的 Mysqldump 大表
- python - 在 utf-8 中编码 json 并上传到 Amazon S3
- postgresql - 在 PostgreSQL 中执行动态查询字符串
- internet-explorer-11 - IE11 和 nomodule 属性
- sql - 在 CONCAT 内将 varchar 值转换为 int 时转换失败
- jquery - jquery在父级中找到下一个但不完全是下一个
- c# - How to correctly wrap long word with hyphen in fixed width label?
- django - 当我尝试使用“git push heroku master”时,它返回“错误:src refspec master 不匹配任何”
- python - 如何在 python 中包含 wget 命令并将服务器 IP 作为变量?