所有代码都可以在下面的JS小提琴中找到我认为这样会更容易。我试图水平显示Flexbox项目，以便前8列和4列彼此相邻。
然后我想在一条全新的线路上添加12，在8和4下面，而不是在它旁边，水平延伸页面长度，并有可怕的滚动。
我试过了什么？
.container {
display: flex; /* or inline-flex */
}
所以上面的代码只是让它们并排，无论你做了多少列，或者如果它超过12，我希望它的工作方式与bootstraps网格系统完全一样，如果这是有道理的话。
在div和dispaly:flex中仅包含想要的div（如果你愿意，可以用同样的方式包装图像部分）
body {
background-color: whitesmoke;
font-family: sans-serif;
margin: 0;
}
#nav {
background-color: #333;
color: #ffff;
padding: 16px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
}
.wrap{
display:flex;
}<!DOCTYPE html>
<html lang="en-GB">
<div id="nav">
<div class="container">
<div class="col-md-12">
lol
</div>
</div>
</div>
<div class="container"><br><br><br>
<div class="wrap">
<div class="col-md-8">
I need to put a pretty picture here.
</div>
<div class="col-md-4">
I will place some sort of box here.
</div>
</div>
<hr>
<br>
<div class="col-md-12">
Trending Pages
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
</div>
</div>你可以这样做：
body {
background-color: whitesmoke;
font-family: sans-serif;
margin: 0;
overflow-x:hidden;
}
#nav {
background-color: #333;
color: #ffff;
padding: 16px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
}<html lang="en-GB">
<head>
<title>{{ config('website.name') }}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css" type="text/css">
</head>
<body>
<div id="nav">
<div class="container">
<div class="col-md-12">
lol
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
<div class="col-md-4">
I will place some sort of box here.
</div>
</div>
<hr>
<div class="container">
<div class="col-md-12">
<span>Trending Pages</span>
<div class="row">
<div class="col-md-2">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
</div>
</div>
</div>
</div>
</body>
</html>