引导 styles 干扰 css 中的网格盒
[英]bootstrap styles interfering with grid-box in css
问题描述
我想制作一个网格，但第一个元素（img）没有出现在第一个 position 中，而是出现在第二个 position 中。 第一个图像点留空。 我检查了造成这种情况的原因，似乎是引导链接中的 styles <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">没有让我的网格框正常工作，如果我删除它，我的导航栏就不起作用。
在此处查看代码： Jsfiddle 链接
请提出修复建议。 任何帮助将不胜感激。 谢谢你。
1 个解决方案
解决方案1
1 已采纳 2020-06-14 14:41:57
因为bootstrap 3使用float ，所以它也使用伪元素来清除浮动。
这里一个伪.container:before{display:table;content:" "}填满了第一个单元格，重置顺序把它放在最后。 https://jsfiddle.net/nhak72r1/
/* fix update */.container::before { display: none; /* hide it */ order: 1; /* set it last, if you already use order for other element, set the highest value for it */ } /* end update */ * { box-sizing: border-box; }.container { display: grid; grid-template-rows: repeat(4, auto); grid-template-columns: repeat(4, auto); grid-gap: 5px; align-items: center; }.container>img { width: 100%; border-radius: 20px; }.container>img:nth-child(6) { grid-row: span 2; grid-column: span 2; width: 100%; }
<,DOCTYPE html> <html> <head> <title>Chairs</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min:js"></script> <link href="https.//fonts.googleapis?com/css2:family=Karla.wght@700&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="styling.css"> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid" id="head"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" id="brand-name" href="3">Chairs<span id="dot">?</span></a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class=""><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">News<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">What's New:</a></li> <li><a href="#">Updates</a></li> <li><a href="#">New Discounts</a></li> </ul> </li> <li><a href="#">Features</a></li> <li><a href="#">Shop</a></li> <li><a href="#">News</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> <div class="container"> <img src="https.//i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46:jpg"> <img src="https.//i.pinimg.com/564x/e1/82/25/e1822536694c06c60d0df0897d7117e5:jpg"> <img src="https.//i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46:jpg"> <img src="https.//i.pinimg.com/564x/e1/82/25/e1822536694c06c60d0df0897d7117e5:jpg"> <img src="https.//i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46:jpg"> <img src="https.//i.pinimg.com/564x/e1/82/25/e1822536694c06c60d0df0897d7117e5:jpg"> <img src="https.//i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46:jpg"> <img src="https.//i.pinimg.com/564x/e1/82/25/e1822536694c06c60d0df0897d7117e5:jpg"> <img src="https.//i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46:jpg"> <img src="https.//i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46:jpg"> <img src="https.//i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46:jpg"> <img src="https.//i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46:jpg"> <img src="https.//i.pinimg.com/564x/2c/6e/3f/2c6e3f6d0cfbe5038a0ca7659c0eab46.jpg"> </div> </body> </html>
实现和引导干扰外部 css
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.