时间戳

首页 > 解决方案 > Flexbox：水平显示列？

css - Flexbox：水平显示列？

问题描述

所有代码都可以在下面的 JS fiddle 中找到，我认为这样会更容易。我正在尝试水平显示 Flexbox 项目，以便前 8 列和前 4 列彼此并排。

然后我想将 12 添加到一个全新的行上，在 8 和 4 下方而不是在它旁边，水平扩展页面长度并具有可怕的滚动。

我尝试了什么？

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

所以上面的代码只是让这一切并排运行，无论你做了多少列或者超过 12 列，如果有意义的话，我希望它能够像引导网格系统一样工作。

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

标签： css

解决方案

你可以这样做：

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>

推荐阅读