Question

所有代码都可以在下面的JS小提琴中找到，我认为这样会更容易。我试图水平显示Flexbox项目，以使前8列和4列彼此相邻。

然后我想将12添加到全新的一行中，在8和4下方，而不是在其旁边，以水平方式扩展页面长度，并具有令人恐惧的滚动效果。

我尝试了什么？

.container {
    display: flex; /* or inline-flex */
}

因此，无论您执行多少列或超过12列，上述代码都可以使它们并存，如果可以的话，我希望它的工作原理与Bootstraps网格系统完全相同。

https://jsfiddle.net/d35g2mra/1/

Answer 1

仅将所需的div包装在div和dispaly:flex中（以相同的方式包装（如果需要，可以将图像部分包装）

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>

Answer 2

您可以这样做：

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>

Flexbox：水平显示列？

2 个答案: