Bootstrap：更改背景颜色

我是学习Bootstrap的新手，我正在寻找有两个col-md-6 divs，一个背景色为蓝色，另一个为白色。我怎样才能改变一种背景颜色，而不是两种？Bootstrap：更改背景颜色

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

来源

2016-10-07 Zachary

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

您可以通过多种方式从样式表中定位该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>

来源

2016-10-07 18:32:29

嗯..这个作品谢谢你！所以我下载了一个模板并试图采用它来达到我自己的风格。这是我的代码的外观，我会更新主要问题。 – Zachary

那么，你现在的问题在哪里？ –

当我使用上面的代码时，整个部分都是蓝色的。当我将背景更改为div时，它仅适用于P和H2标签。我应该删除该部分并将每个col-md-6换成一个带有定义的bg的div吗？ – Zachary

你可以硬编码。

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

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

来源

2016-10-07 18:29:01

这会工作，但我建议不要使用内联样式。 –

不自引导特定真的...您可以使用内联样式或自定义一个类来指定所需的“背景色”。

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

来源

2016-10-07 18:33:25

Bootstrap：更改背景颜色

回答

相关问题