我想制作一个网格,但是第一个元素(img)不在第一个位置出现,而是出现在第二个位置。第一个图像点留为空白。我检查了原因,似乎引导链接<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
中的样式无法使网格箱正常工作,如果将其删除,则导航栏将无法工作。
在此处检查代码:Jsfiddle link
请提出修复建议。任何帮助将不胜感激。谢谢。
因为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>