Question

我是学习Bootstrap的新手，我看起来有2个col-md-6 divs，彼此相邻，背景颜色为蓝色，另一个为白色。如何更改一种背景颜色而不是两种颜色？

我试图在本网站上看到类似于全宽照片下方的样子。减去左侧的图像。我只想要一块白色和一块蓝色。 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>

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。

＆＃13;

.blue {
  background-color: blue;
}

＆＃13;

<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>

＆＃13;

Answer 2

你可以硬编码。

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

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

Answer 3

非特定于Bootstrap ...您可以使用内联样式或定义自定义类来指定所需的＆＃34;背景颜色＆＃34;。

另一方面，Bootstrap 有一些内置的背景颜色，具有语义含义，如＆＃34; bg-success＆＃34; （绿色）和＆＃34; bg-danger＆＃34; （红色）。

Bootstrap：改变背景颜色

3 个答案: