html - CSS Flex 项之间的静态填充

Question

我正在尝试在 CSS 中创建一个灵活的布局，该布局将根据客户的分辨率进行包装。

例如，在横向（1024px 宽）的 ipad 上，我想显示以下内容：

但是在纵向（600px 宽）的剧本上，我想显示以下内容：

除了 20px 的边距外，我几乎所有的东西都在工作。我似乎无法弄清楚如何指定包装元素的边距。

这是我的代码：

HTML：

<div class="box-row-fluid">
     <div class="col">Box 1</div>
     <div class="col">Box 2</div>
</div>

CSS：

.box-row-fluid {
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
}

.box-row-fluid > .col {
    -webkit-flex: 1 400px;
    background: #fff;
}

代码假定浏览器是一个有效的 webkit 浏览器。

我会很感激一些帮助。感谢您的时间。

Answer 1

您当然可以这样做My Fiddle（已编辑background color以提高边距可见性）

CSS

.col:nth-child(1) {
   margin-bottom: 20px;
}

要在 2 之间水平添加边距，div您可以使用@media 查询特定分辨率并添加margin-right: 20px;另一个

解释：使用:nth-child(1)因为你同时class="col"使用<div>

Answer 2

为什么不包括 twitter 引导程序？

它将与此一起工作。

<div class="row-fluid">
    <div class="span6">
        Content box 1
    </div>
    <div class="span6">
        Content box 1
    </div>
</div>

您唯一需要包括的是“网格系统”非常小而且效果很好！