CSS Bootstrap：更改背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39923686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: change background color
提问by Zachary
I'm new to learning Bootstrap and I'm looking have 2 col-md-6 divs next to one another having one background-color blue and the other white. How can I change one background color and not both?
我是学习 Bootstrap 的新手，我正在寻找 2 个 col-md-6 div，它们彼此相邻，背景颜色为蓝色，另一个为白色。如何更改一种背景颜色而不是两种背景颜色？
I'm trying to get a look similar to below the full width photo on this website. Minus the image on the left. I just want a block white and a block blue. http://tympanus.net/Freebies/Boxify/
我试图在本网站上的全宽照片下方获得类似的外观。减去左边的图像。我只想要一块白色和一块蓝色。http://tympanus.net/Freebies/Boxify/
CSS
CSS
.bg-primary {
background-color: #1a52c6;
}
HTML
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>
回答by Esteban Gerpe
You can target that div from your stylesheet in a number of ways.
您可以通过多种方式从样式表中定位该 div。
Simply use
只需使用
.col-md-6:first-child {
background-color: blue;
}
Another way is to assign a class to one div and then apply the style to that class.
另一种方法是将一个类分配给一个 div，然后将样式应用于该类。
<div class="col-md-6 blue"></div>
.blue {
background-color: blue;
}
There are also inline styles.
还有内联样式。
<div class="col-md-6" style="background-color: blue"></div>
Your example code works fine to me. I'm not sure if I undestand what you intend to do, but if you want a blue background on the second div just remove the bg-primaryclass from the section and add you custom class to the 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>回答by Matthew Beaudin
You could hard code it.
你可以硬编码它。
<div class="col-md-6" style="background-color:blue;">
</div>
<div class="col-md-6" style="background-color:white;">
</div>
回答by Jeff McCloud
Not Bootstrap specific really... You can use inline styles or define a custom class to specify the desired "background-color".
不是 Bootstrap 特定的......您可以使用内联样式或定义自定义类来指定所需的“背景颜色”。
On the other hand, Bootstrap doeshave a few built in background colors that have semantic meaning like "bg-success" (green) and "bg-danger" (red).
另一方面，Bootstrap确实有一些内置的背景颜色，这些颜色具有语义，如“bg-success”（绿色）和“bg-danger”（红色）。
