不同的颜色或背景为bootstrap3中的不同行 [英] Different colors or background for different rows in bootstrap3

问题描述

我正在尝试使用bootstrap的jumbotron创建一个网页。我创建了2列jumbotron。我想要两个jumbotron行的不同背景颜色，类似于所示的图片（只是一个样本）





示例图片： http://i.stack.imgur.com/i8C93.png

代码为：

   
< div class =jumbotron> 
< div class =container> 
< div class =row> 
< div class =col-lg-6> 
< h2>这是jumbotron的第1行< / h2> 
< / div> 
< div class =col-lg-6> 
< h2>这是jumbotron的第2行< / h2> 
< / div> 
< / div> 
< / div> 
< / div> 

任何解决方案？在此先感谢！

解决方案

使用CSS

------------

 col-lg-6：nth-​​child（1）{
  background  ：  orange;  
} 
 col-lg-6：nth-​​child（2）{
  background  ：  blue;  
} 

I am trying to make a web page with bootstrap's jumbotron. I created 2 column jumbotron. I want different background color for both the rows of jumbotron, something similar to the picture shown(just a sample)


example image: http://i.stack.imgur.com/i8C93.png
the code is:

    <div class="jumbotron"> 
    <div class="container">
     <div class="row"> 
    <div class="col-lg-6">
     <h2>This is row 1 of jumbotron</h2> 
    </div> 
    <div class="col-lg-6"> 
    <h2>This is row 2 of jumbotron</h2>
     </div> 
    </div> 
    </div>
     </div>

Any solution for this? Thanks in advance!

解决方案

Using CSS
------------

col-lg-6:nth-child(1) {
  background: orange;
}
col-lg-6:nth-child(2) {
  background: blue;
}

这篇关于不同的颜色或背景为bootstrap3中的不同行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！