Question

我有一个PSD设计，网格看起来像这样 - Grid image图片仅显示PSD的部分内容，因为我不拥有在公开场合发布它的权利。但正如你所看到的那样，网格（蓝色条纹）并不像一个强大的网格那样从一侧到另一侧。它开始120px并在屏幕前完成120px（谈论总共12列，而不是每列）

我在编写这个PSD时使用bootstrap，并且bootstraps网格从一侧传到另一侧。

我的问题：如何更改引导网格（中心/添加边距），使其看起来与psd中的网格相同，即在屏幕上启动120px并在屏幕结束前完成120px？

我不需要在网格之外有任何内容，因为它在PSD中。所以我需要行从一边到另一边但是列开始一点，然后在屏幕之前完成一点。我不能使用bootstrap容器而不是容器流体，因为它也会占用行。我也不能使用偏移量，因为我将“丢失”一些列，并且每行不再有12列。

我的HTML文件包含标准流体网格

<div class="container-fluid>
    <div class="row">
    <!-- A few columns in different sizes -->
    </div>
    <div class="row">
    <!-- A few columns in different sizes -->
    </div>
    <div class="row">
    <!-- A few columns in different sizes -->
    </div>
</div>

Answer 1

我不确定我是否完全理解你的问题，但你可以尝试以下方法：

添加容器（Bootstrap container）
使用css添加保证金：.col-sm-4 {margin:Your margin here;}

Answer 2

将以下内容添加到您的css

.row{padding: 0 120px;}

Answer 3

这真的取决于行内的其他内容吗？如果列不需要从一边到另一边，为什么不使用Bootstrap .container？您仍可以使用container ..

之外的全宽内容

http://codeply.com/go/HwIDGQpdbO

如何将边距居中/添加到bootstraps网格？

3 个答案: