Bootstrap: изменить цвет фона

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.

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

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 конкретным действительно ... Вы можете использовать встроенные стили или определить пользовательский класс, чтобы указать нужный «цвет фона».

С другой стороны, Bootstrap делает имеет несколько встроенных цветов фона, которые имеют смысловое значение, например «bg-success» (зеленый) и «bg-danger» (красный).