改变整个div的颜色而不仅仅是元素

Question

我试图使第二个元素具有灰色背景但是当我将样式添加到div时它只将背景颜色应用于小span元素。

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

Answer 1

将背景颜色应用于行，而不是列。列高仅与内部内容一样高，这就是第一列短的原因。

Answer 2

我将风格应用于错误的div。它应该应用于“容器 - 流体行”div。

Answer 3

据我所知，你希望整个元素都是灰色的。为什么不将背景颜色应用于行元素？

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

您需要设置整行的背景颜色：

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