Bootstrap：更改背景颜色答案

【问题标题】：Bootstrap: change background colorBootstrap：更改背景颜色
【发布时间】：2016-10-07 18:25:35
【问题描述】：

我是学习 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>

【问题讨论】：

这不是真正的 Bootstrap 问题，而是 CSS 和 HTML 问题。

标签： css

【解决方案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>

【讨论】：

嗯.. 行得通，谢谢！所以我下载了一个模板，并试图将它应用到我自己的风格中。这就是我的代码的样子，我将更新主要问题。
那么，您现在的问题在哪里？
当我使用上面的代码时，整个部分都是蓝色的。当我将背景更改为 div 时，它仅适用于 P 和 H2 标签。我应该删除该部分并将每个 col-md-6 包装到具有定义 bg 的 div 中吗？
答案更新。不过，不确定这是否是您要找的。span>

【解决方案2】：

你可以硬编码。

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

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

【讨论】：

这可行，但我建议不要使用内联样式。

【解决方案3】：

确实不是特定于 Bootstrap... 您可以使用内联样式或定义自定义类来指定所需的“背景颜色”。

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

【讨论】：