我想制作一个网格，但是第一个元素（img）没有出现在第一个位置，而是出现在第二个位置。 第一个图像点留空。 我检查了原因，似乎引导链接中的样式不能让网格框正常工作，如果删除它，导航栏就不能工作。
查看这里的代码:Jsfiddle link
请提出解决办法。 任何帮助都将不胜感激。 谢谢。
因为bootstrap 3使用了float，所以它也使用伪元素来清除float。
这里，一个伪.container:before{display:table；content:“”}填满第一个单元格，重置顺序将其放在最后。 https://jsfiddle.net/nhak72r1/
null
/* 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>