html - 如何使用 twitter bootstrap 格式化背景颜色？

Question

我在这里玩网站上的样式：http: //www.grabapper.com

我正在尝试#2ba6cb在英雄单元中包含背景颜色。当我包括：

<div class="row" style ='background-color: #2ba6cb;'>

颜色不会一直到页面边缘。如何让背景颜色转到页面边缘？

Answer 1

Bootstrap 默认的“上下文背景”帮助类来改变背景颜色：

.bg-primary
.bg-default
.bg-info
.bg-warning
.bg-danger

如果您需要设置自定义背景颜色，您可以在下面的 style.css（自定义 css 文件）示例中编写自己的自定义类

.bg-pink
{
  background-color: #CE6F9E;
}

Answer 2

将行移到前面<div class="container marketing">并用新容器包裹它，因为当前容器宽度为 1170px（不是 100%）：

<div class='hero'>
  <div class="row">
   ...
  </div>
</div>

CSS：

.hero {
  background-color: #2ba6cb;
  padding: 0 90px;
}

Answer 3

只需在周围添加一个 div ，container它看起来像：

<div style="background: red;">
  <div class="container marketing">
    <h2 style="padding-top: 60px;"></h2>
  </div>
</div>