如何仅为列中的div设置背景颜色

Question

我只想为列中的 DIV 设置背景颜色，但我在整个列中获得背景。这是怎么做到的？这是我的代码（非常简单）

 .news {
    background-color: #fff;
    padding: 15px 20px;

    .news-thumb {
        img {
            border-bottom: 5px solid $Brown;
        }
    }
}

和 HTML：

 <div class="col-lg-4">
    <!-- DRUGI NEWS -->
    <div class="news">
        <div class="news-thumb">
            <img src="images/NewsThumb.png" alt="" class="img-responsive" />
        </div><!-- /.news-thumb -->
        <div class="news-excerpt">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam,
                eaque!
            </p>
        </div><!-- /.news-excerpt -->
    </div><!-- /.news -->
</div><!-- /.col-lg-6 -->

更新 这是 JSFiddle 我有全宽背景，但我只想要 ‘my-div’

原文由 Damian 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要尝试使用 Bootstraps 嵌套列。这样的事情应该有所帮助：

HTML:

 <div class="row">
   <div class="col-lg-4">
        <div class="news row"> <!-- Add row class here -->
            <div class="news-thumb col-xs-4"> <!-- Add new col class here -->
                <!--<img src="http://placehold.it/300/300" alt="placeholder image" class="img-responsive" />-->
            </div>
            <div class="news-excerpt col-xs-8"> <!-- Add new col class here -->
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam,
                    eaque!
                </p>
            </div>
        </div>
    </div>
    <div class="col-lg-4"></div> <!-- Other column -->
    <div class="col-lg-4"></div> <!-- Other column -->
</div>

CSS：

 body {
  background-color: #f1f1f1;
}
.news {
  background-color: #fff;
}
.news-thumb {
  background-color: red;
  height: 300px;
}

本质上，您需要在 .col- 元素中添加另一行，并在其中创建另一组列。我选择了 4 / 8，但这些可以更改为最适合您的。

示例： https ://jsfiddle.net/bhxwof9h/

引导嵌套：http: //getbootstrap.com/css/#grid-nesting

原文由 Kieran McClung 发布，翻译遵循 CC BY-SA 3.0 许可协议