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'

Answer 1

在另一个div中使用div，这对您有帮助

请参阅Working demo here

Answer 2

引导程序.col-lg的应用宽度超过1200px，因此您不会在小屏幕上看到它的效果，例如

但是当我将视口设置为超过1200px时，它看起来像是

所以您只需要在更大的屏幕上进行测试或使用.col-md-4或.col-sm-4

Answer 3

很难理解你想要什么...... 试试这个css：

.env

Answer 4

您需要使用较小的列大小，因为该列的大小仅为大屏幕4，对于小于大屏幕宽度（由bootstrap css定义）的屏幕，它默认占用全部/ p>

所以如果您使用<div class="col-xs-4">，它应该按照您的意愿运作。

https://jsfiddle.net/ufhwrg8w/3/（更新js小提琴）

如果您希望红色“拥抱”img并且不填充完整的col-4，那么在您的div上使用display: inline-block css，如下所示：

https://jsfiddle.net/ufhwrg8w/4/

Answer 5

您需要使用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/

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

如何仅为列

5 个答案: