Bootstrap：更改背景颜色

Question

我是学习 Bootstrap 的新手，我正在寻找 2 个 col-md-6 div，它们彼此相邻，一个背景颜色为蓝色，另一个为白色。如何更改一种背景颜色而不是两者？

我试图在本网站的全幅照片下方看到类似的外观。减去左边的图像。我只想要一块白色和一块蓝色。 http://tympanus.net/Freebies/Boxify/

CSS

 .bg-primary {
    background-color: #1a52c6;
}

HTML

       <section class="bg-primary" id="about">
        <div class="container">
            <div class="row">

            <!-- Columns are always 50% wide, on mobile and desktop -->

  <div class="col-md-6">
  <h2 class="section-heading text-center">Title</h2>
  <p class="text-faded text-center">.col-md-6</p>
  </div>

  <div class="col-md-6 blue">
  <h2 class="section-heading text-center">Title</h2>
  <p class="text-faded text-center">.col-md-6</p>
  </div>
  </div>
             </div>
                </div>

原文由 Zachary 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过多种方式从样式表中定位该 div。

只需使用

.col-md-6:first-child {
  background-color: blue;
}

另一种方法是将一个类分配给一个 div，然后将样式应用于该类。

 <div class="col-md-6 blue"></div>

.blue {
  background-color: blue;
}

还有内联样式。

 <div class="col-md-6" style="background-color: blue"></div>

您的示例代码对我来说很好。我不确定我是否理解您打算做什么，但是如果您想要第二个 div 上的蓝色背景，只需从该部分中删除 bg-primary 类并将您的自定义类添加到 div 中。

 .blue {
  background-color: blue;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<section id="about">
  <div class="container">
    <div class="row">
    <!-- Columns are always 50% wide, on mobile and desktop -->
      <div class="col-xs-6">
        <h2 class="section-heading text-center">Title</h2>
        <p class="text-faded text-center">.col-md-6</p>
      </div>
      <div class="col-xs-6 blue">
        <h2 class="section-heading text-center">Title</h2>
        <p class="text-faded text-center">.col-md-6</p>
      </div>
    </div>
  </div>
</section>

原文由 Esteban Gerpe 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以对其进行硬编码。

 <div class="col-md-6" style="background-color:blue;">
</div>

<div class="col-md-6" style="background-color:white;">
</div>

原文由 Matthew Beaudin 发布，翻译遵循 CC BY-SA 3.0 许可协议