Question

我有人为我设计了一个网站，我将在其中构建一个引导程序3.设计师提到该设计是使用1180引导程序布局构建的，我很难过找出那是什么。我假设不是使用1200,980,768等...我会使用1180,964.5,755.85等...但是当我打开我收到的.ai文件时，文件宽度为1200px，容器宽度为940px（由于左侧和右侧15px填充，引导程序为970px）。我应该将主宽度设置为1200px，将容器宽度设置为940px，然后从那里开始构建它吗？任何帮助表示赞赏！

Answer 1

ootstrap在任何地方使用box-sizing: border-box;，这意味着填充不会增加div大小。

如果我们查看bootstrap.css，我们可以看到：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
/* ... */
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

因此，在大型设备中，您将使用1170px布局，包括 15px填充。

如果您想使用940px容器，可以使用这个CSS：

@media (min-width: 1200px) {
  .container {
    padding-right: 115px;
    padding-left: 115px;
  }
}

然后：

在大型设备中，你将拥有940px容器的宽度（加上115px填充）
在中型设备中，您将拥有940px容器的宽度（加上15px填充）
在大型设备中，您将拥有720px容器的宽度（加上15px填充）
在大型设备中，您将拥有100％容器的宽度（无填充）

Bootply

Bootstrap在1180？

1 个答案: