如何改變COL-SM（引導）母公司elemtn背景色

Question

我需要幫助

我沒有使用CSS

，這是我的HTML代碼來改變背景顏色爲引導父元素

<div class="body-panel"> 
      <div class="col-sm-4 left-guest"> 
       testing 
      </div> 
      <div class="col-sm-8 right-guest"> 

      </div> 

    </div> 

這是我的CSS

.body-panel{ 
    color: blue; 
    background-color: red; 
} 
.left-guest{ 
    border: dotted 1px black; 
    min-height: 1000px; 
} 
.right-guest{ 
    border: dotted 1px black; 
    min-height: 1000px; 
} 

但背景色在類體面板不工作，和顏色工作

有人可以幫助我嗎？

謝謝

Answer 1

.body-panel具有零高度由於浮動兒童（col-sm-8）

您需要通過任一給.body-panel一個row類或clearfix類，它們都建在引導輔助類來清除浮動。

<div class="body-panel row"> 
    <div class="col-sm-4 left-guest"> 
    testing 
    </div> 
    <div class="col-sm-8 right-guest"> 

    </div> 

</div> 

<div class="body-panel clearfix"> 
    <div class="col-sm-4 left-guest"> 
    testing 
    </div> 
    <div class="col-sm-8 right-guest"> 

    </div> 

</div> 

EXAMPLE

Answer 2

給人體面板溢出：隱藏或甚至更好的行類。

這是因爲引導程序的col類是浮動的，因爲這樣的父元素沒有考慮高度，所以你的body-panel沒有高度amd，即使它應用了背景顏色，你也沒有看到它。

我強烈建議給它一個行類，因爲這是使用引導程序網格類的正確方法。

Answer 3

您可以使用jQuery來實現這個場景

請嘗試這種改變父DIV的背景色。

**

<script type ="text/javascript"> 
    $(document).ready(function() { 
     $(".left-guest").parent().css("background-color", "yellow"); 
    }); 
</script> 

**