Question

我的PSD文件宽度为1400px。我想通过BootStrap 3创建该网站。但Bootstap的默认宽度是1170px。如何通过BootStrap制作我的1400px网站。提前谢谢。

Answer 1

选项＃1：

为width > 1430px（1400px + 2 * 15px填充）的设备添加断点：

Bootstrap 3：

@media (min-width: 1430px) {
  .container {
    width: 1400px;
  }
}

Bootstrap 4：

@media (min-width: 1430px) {
  .container {
    max-width: 1400px;
  }
}

选项＃2：

Customize your Bootstrap assets，更改这些变量：

@screen-lg: 1400px
@container-large-desktop: ((1370px + @grid-gutter-width))

下载它。

Answer 2

您可能希望进行自定义Bootstrap 3构建。

在Bootstraps自定义页面下查看Grid System和Container Sizes部分。

在 网格系统 下，您可能想要更改@grid-gutter-width属性，这可能不是您的首选项。 @grid-gutter-width是列之间的宽度，默认值为30px。

在 容器大小</ em> 下，您必须更改@container-large-desktop属性。默认值为((1140px + @grid-gutter-width))。

我建议将@container-large-desktop属性更改为((1370px + @grid-gutter-width))，并将@grid-gutter-width保留为默认值。

如果您决定更改@grid-gutter-width，只需从1400减去新的@grid-gutter-width。例如，如果您制作@grid-gutter-width: 50px，那么请@container-large-desktop: ((1350px + @grid-gutter-width)) 1400 - 50 = 1350

我希望这会有所帮助。

如何通过BootStrap创建1400px固定宽度的网站？

2 个答案:

选项＃1：

选项＃2：