twitter-bootstrap 如何仅为列中的div设置背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36333332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set background color only for div in column
提问by Damian
I want to set background color only for DIV in column, but I getting background on full column. How do this? Here is my code (very simple)
我只想为列中的 DIV 设置背景颜色，但我在整列上获得背景。这怎么办？这是我的代码（非常简单）
.news {
background-color: #fff;
padding: 15px 20px;
.news-thumb {
img {
border-bottom: 5px solid $Brown;
}
}
}
and HTML:
和 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 -->
UPDATEHere is JSFiddleI have background on full width, but I want only for 'my-div'
更新这是JSFiddle我有全宽背景，但我只想要“我的 div”
回答by Zubair sadiq
回答by Peter Wilson
bootstrap .col-lgis applied on width more than 1200pxso you will not see its effect on small screens like
bootstrap.col-lg应用于宽度超过1200px所以你不会看到它在小屏幕上的效果，比如
but when I enralged the viewport to more than 1200pxit's look like
但是当我将视口放大到比1200px它看起来更像时
so all you need is to test on larger screen or to use .col-md-4or .col-sm-4
所以你需要的只是在更大的屏幕上测试或使用.col-md-4或.col-sm-4
回答by Maurizio Battaghini
It's really hard understand what you want... Try this css:
真的很难理解你想要什么......试试这个css：
/**
* this select every DIV that match "col" in the class
*/
div[class*=col] {
background-color: red
}
.news {
background-color:green;
padding: 15px 20px;
.news-thumb {
img {
border-bottom: 5px solid yellow;
}
}
}
回答by indubitablee
you need to use a smaller column size since the the column is only sized 4 for large screens, it'll default to taking up the full with for screens less than the width of a large screen (defined by bootstrap css)
您需要使用较小的列大小，因为对于大屏幕，该列的大小仅为 4，对于小于大屏幕宽度（由 bootstrap css 定义）的屏幕，它默认占用全部大小
so if you use <div class="col-xs-4">, it should work as you want it to.
因此，如果您使用<div class="col-xs-4">，它应该可以按照您的意愿工作。
https://jsfiddle.net/ufhwrg8w/3/(updated js fiddle)
https://jsfiddle.net/ufhwrg8w/3/（更新了js小提琴）
if you want the red to "hug" the img and not fill the full col-4, then use display: inline-blockcss on your div like this:
如果你想让红色“拥抱” img 而不是填充完整的 col-4，那么display: inline-block在你的 div 上使用css，如下所示：
回答by Kieran McClung
You'll need to play around with Bootstraps nesting columns. Something like this should help:
您需要使用 Bootstrap 嵌套列。这样的事情应该有帮助：
HTML:
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:
CSS：
body {
background-color: #f1f1f1;
}
.news {
background-color: #fff;
}
.news-thumb {
background-color: red;
height: 300px;
}
Essentially you need to add another row inside your .col-element and within there create another set of columns. I've gone with 4 / 8 but these can be changed to whatever works best for you.
本质上，您需要在.col-元素内添加另一行，并在其中创建另一组列。我已经选择了 4 / 8，但这些可以更改为最适合您的。
Example: https://jsfiddle.net/bhxwof9h/
示例：https: //jsfiddle.net/bhxwof9h/
Bootstrap nesting: http://getbootstrap.com/css/#grid-nesting
Bootstrap 嵌套：http: //getbootstrap.com/css/#grid-nesting
