Question

我根据提供给我的设计将bootstrap的容器宽度更改为981px。

@media (min-width: 1200px) {
    .container{
        max-width: 981px;
    }
}

我注意到装订线宽度设置为30px，但是当容器宽度不同时，如何确定宽度是多少？

我想将容器最大宽度保持在981px，因为这就是设计师在Photoshop中实现布局的方式。

例如，有一个981像素宽的图像，它跨越容器的整个宽度。

Answer 1

您可以通过编辑较少的文件本身而不是编译的css来实现此目的。

如果一切都是正确嵌套的，那么所需要的只是覆盖一些变量（你可以重新定义变量，最后一个实例将统治，所以只需在导入引导样式后添加它们）：

少：

@import "../bower_components/bootstrap/less/bootstrap.less";

// impractically large breakpoint for simplicity 
// now you've only got three breakpoints to play with :/
@screen-lg: 12000px;

@my-target-width: 981px;
@container-desktop: ((@my-target-width + @grid-gutter-width));

HTML：

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <img class="img-responsive" src="http://lorempixel.com/output/cats-q-g-1200-500-2.jpg" alt="">
        </div>
    </div>
</div>

我会说在单独的css中覆盖所需的样式是非常不切实际的（如果你不是首先使用较少或sass，你肯定会错过一些你需要做的覆盖在已编译的CSS中。）

我绝对建议采用学习曲线，并按照预期使用较少或较少的引导程序。

我最终进行了safari，并为此创建了一个回购，因为我不知道一个网站（嗯......没有检查），这将在小提琴中预编译...所以：

Bootstrap 3：如何计算不同容器宽度的装订线宽度

1 个答案: