Bootstrap：更改背景颜色

Question

我刚开始学习Bootstrap，想让两个col-md-6的div并排显示，其中一个背景颜色为蓝色，另一个为白色。我该如何只改变其中一个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

---

这不是一个Bootstrap问题，而是一个CSS和HTML问题。 - dokgu

Answer 1

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

只需使用：

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

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

<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

---

嗯...可以了，谢谢！我下载了一个模板，试图将其调整为我的风格。这是我的代码样子，我会更新主要问题的。 - Zachary

那么，你现在遇到了什么问题？ - Esteban Gerpe

当我使用上面的代码时，整个部分都是蓝色的。当我将背景更改为div时，它仅适用于P和H2标记。我应该删除该部分并将每个col-md-6包装到具有定义的背景的div中吗？ - Zachary

答案更新。不过我不确定这是否是你要找的。 - Esteban Gerpe

Answer 2

你可以硬编码它。

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

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

- Matthew Beaudin

---

这个可以运行，但我建议避免使用内联样式。 - dokgu

Answer 3

这并不是Bootstrap特有的... 您可以使用内联样式或定义自定义类来指定所需的 "background-color"。

另一方面，Bootstrap确实具有一些内置的背景颜色，具有语义含义，例如 "bg-success"（绿色）和 "bg-danger"（红色）。

- Jeff McCloud