css – 如何在不拧紧网格的情况下为Bootstrap 3的容器添加填充?

前端之家收集整理的这篇文章主要介绍了css – 如何在不拧紧网格的情况下为Bootstrap 3的容器添加填充?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
许多网站设计要求使用包含网站内容的较轻前景页面的深色背景.使用Bootstrap时,似乎合乎逻辑的是,只需将浅色应用于.container div并完成它.但是,Bootstrap的容器不会在其边缘和列之间提供任何填充,因此此解决方案提供了浅色背景,但列内容与边缘齐平 – 不是很好看.

这是一个常见的问题,在stackoverflow和其他地方有一些Bootstrap 2的解决方案,但是我找不到任何对Bootstrap 3有用的东西.

解决方法

其中一个Bootstrap 2解决方案涉及使用.container-fluid,它将内部网格从像素切换到基于百分比.然后,可以将填充应用于.container-fluid中的背景div,并且内部列将无缝地调整以适合.这似乎是一个很好的方法,但用于调整其他一些样式的特定CSS不适用于Bootstrap 3.

在挖掘Bootstrap源代码之后,我注意到.container和.container-fluid规则之间的唯一区别是grid.less是三个媒体查询.我将页面内容包装在.container-fluid中然后用包含媒体查询内容覆盖其定义,以便页面内容响应与使用标准.container的页眉和页脚相同.

这是HTML

<html>
<head>
  <title>Bootstrap 3 Container Padding Example</title>
</head>
<body>
  <div class="page-container">
    <div class="container-fluid">
      <div class="page-bg">
         <!-- PAGE CONTENT -->
      </div>
    </div>
  </div>
</body>
</html>

然后是.less:

.page-container > .container-fluid:first-child {
  .container-fixed();

  @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
}

然后在.page-container div中添加填充:

.page-container {
  .page-bg {
    padding: 15px;
    background-color: #EFEFEF;
  }
}

body {
  background-color: #333
}

这似乎有效.我还没有完成驻留在这个容器中的接口的样式,所以可能会出现问题,但到目前为止一切似乎都很好.

Here is a working example of this solution on codepen.io.

请注意,上面的解决方案在包含Bootstrap的变量和mixins .less文件之后使用less.css.这是编译的CSS:

.page-container > .container-fluid:first-child {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .page-container > .container-fluid:first-child {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .page-container > .container-fluid:first-child {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .page-container > .container-fluid:first-child {
    width: 1170px;
  }
}
.page-container .page-bg {
  padding: 15px;
  background-color: #EFEFEF;
}
body {
  background-color: #333333;
}

猜你在找的CSS相关文章