改變整個div不僅僅是元素的顏色

我想讓第2個元素有一個灰色背景，但是當我將樣式添加到div時，它只將背景顏色應用於小跨度元素。改變整個div不僅僅是元素的顏色

<div class="container-fluid row"> 
<div class="col-xs-3 col-lg-3 small-margin-top" style="background-color: #e4e4e4"> 
    <p><i class="fa fa-wrench" aria-hidden="true" style="font-size: 26px;"></i> <strong>The Architect:</strong></p> 
</div> 
<div class="col-xs-9 col-lg-9 small-margin-top" style="background-color: #e4e4e4"> 
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> 
</div>

來源

2017-06-20 rycekrispies

我投票關閉這一問題作爲題外話，因爲在回答中（實際上是評論），他將CSS錯誤的元素提問狀態使得沒有價值的問題。 – Rob

應用的背景色行，而不是列。列高只有內容的高度，這就是爲什麼第一列很短。

來源

2017-06-20 13:08:36

我正在將樣式應用於錯誤的div。它應該應用於「容器流體行」格。

來源

2017-06-20 13:09:07 rycekrispies

您需要設置整行的背景色：

<div class="container-fluid row" style="background-color:#e4e4e4"> 
    .....

來源

2017-06-20 13:10:57

據我瞭解，你想有灰色的全部元素。爲什麼不將背景顏色應用於行元素？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid row"> 
 
<div class="col-xs-3 col-lg-3 small-margin-top" style="background-color: #e4e4e4"> 
 
    <p><i class="fa fa-wrench" aria-hidden="true" style="font-size: 26px;"></i> <strong>Not how you want it.</strong></p> 
 
</div> 
 
<div class="col-xs-9 col-lg-9 small-margin-top" style="background-color: #e4e4e4"> 
 
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, 
 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> 
 
</div> 
 
<div> t </div> 
 
<div class="container-fluid row" style="background-color: #e4e4e4"> 
 
<div class="col-xs-3 col-lg-3 small-margin-top" > 
 
    <p><i class="fa fa-wrench" aria-hidden="true" style="font-size: 26px;"></i> <strong>How you want it.</strong></p> 
 
</div> 
 
<div class="col-xs-9 col-lg-9 small-margin-top"> 
 
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, 
 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> 
 
</div>

來源

2017-06-20 13:13:25 kacase

改變整個div不僅僅是元素的顏色

回答

相關問題