jmc*_*ael 10 css background padding twitter-bootstrap twitter-bootstrap-3
许多网站设计要求使用包含网站内容的较轻前景页面的深色背景.当使用Bootstrap时,似乎合乎逻辑的是,只需将浅色应用于.container div并完成它.但是,Bootstrap的容器不会在其边缘和列之间提供任何填充,因此此解决方案提供了浅色背景,但列内容与边缘齐平 - 不是很好看.
这是一个常见的问题,在stackoverflow和其他地方有几个解决方案用于Bootstrap 2,但我找不到任何对Bootstrap 3有用的东西.
Bootstrap 2 解决方案之一涉及使用 .container-fluid 将内部网格从基于像素切换为基于百分比。然后，可以将填充应用于 .container-fluid 中的背景 div，并且内部列将无缝调整以适应。这似乎是一个很好的方法，但是用于调整其他一些样式的特定 CSS 不适用于 Bootstrap 3。
在深入研究 Bootstrap 源代码后，我注意到 grid.less 中 .container 和 .container-fluid 规则之间的唯一区别是三个媒体查询。我将页面的内容包装在 .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
}
这似乎有效。我还没有完成驻留在该容器中的界面的样式设计，因此将来可能会出现问题，但到目前为止一切似乎都呈现良好。
请注意，上面的解决方案在包含 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;
}
| 归档时间： |
|
| 查看次数： |
22109 次 |
| 最近记录： |