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：更改背景顏色

回答

相關問題