twitter-bootstrap 如何更改 Bootstrap 的轮播插件的背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46087033/
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 change the background color for Bootstrap's carousel plugin?
提问by Sylvester_Sun
So I'm having trouble trying to change the background color for the carousel. No matter what I do, it seems like the background is always white. I used the code from https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=hfor my carousel.
所以我在尝试更改轮播的背景颜色时遇到了麻烦。无论我做什么，背景似乎总是白色的。我将https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h 中的代码用于我的轮播。
<div class="container" id="slides">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://photos-3.dropbox.com/t/2/AADPmL6gjWHr1iYlah93suqa28cVuGlQ32aryhnqDI5JzA/12/611886439/jpeg/32x32/1/_/1/2/ConnectK%20carousel.jpg/ELbFkPkEGO0BIAIoAg/3oq_ZcBwruMHDZh7EsNU5B8UTbQE8n0KIgLWHmtklMQ?size=1280x960&size_mode=3" alt="Connect K project" style="width:100%;">
</div>
<div class="item">
<img src="https://photos-4.dropbox.com/t/2/AADn_i5Z_NwIjiBSH8pnZB7nPAYz-tmRqxlDtEMGsRfOww/12/611886439/jpeg/32x32/1/_/1/2/DigitalBraille.jpg/ELbFkPkEGO0BIAIoAg/TzOhuN9b1r5yKEmQ43BWI7NkmaaSwdLR0ikRW4DnaXc?size=1280x960&size_mode=3" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="https://photos-4.dropbox.com/t/2/AADJdh6q_qeKgWjhsL07M2NQH81JFg8Mx51O7G60oeRlGw/12/611886439/jpeg/32x32/1/_/1/2/MedAppJam.JPG/ELbFkPkEGPMBIAIoAg/aQ1lqISwGTPXaGi6jgbJoeMmDcQUtcKoIyWTrZADmPI?size=1280x960&size_mode=3" alt="MedAppJam project" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I've tried using CSS styles to change the background but for some reason, it doesn't seem to work. And I'm not sure why. Here's the CSS I added to try to change the background color.
我曾尝试使用 CSS 样式来更改背景，但由于某种原因，它似乎不起作用。我不知道为什么。这是我添加的用于尝试更改背景颜色的 CSS。
#slides{
color: grey;
background-color: grey !important;
}
.carousel{
color: grey;
background-color: grey !important;
}
.carousel .item{
color: grey;
background-color: grey;
}
https://codepen.io/chukt/pen/wqQqyL?editors=1100#0That's the link to my complete code. Sorry for all the weird colors. I was just messing around with it. Anyway, I've also checked out other questions like this one change twitter bootstrap carousel background?and it doesn't seem to work. Can anyone explain this to me?
https://codepen.io/chukt/pen/wqQqyL?editors=1100#0这是我完整代码的链接。抱歉所有奇怪的颜色。我只是在玩弄它。无论如何，我还查看了其他问题，例如更改 twitter bootstrap carousel 背景？它似乎不起作用。任何人都可以向我解释这一点吗？
采纳答案by Kieran McClung
The problem you have at the moment is that the carousel has the container class applied and is, therefore, adding a fixed width to the element. The white you're seeing either side is actually the background colour of the body.
您目前遇到的问题是轮播应用了容器类，因此为元素添加了固定宽度。你在两边看到的白色实际上是身体的背景颜色。
There are two ways around this (I've shortened the code for the example):
有两种方法可以解决这个问题（我已经缩短了示例的代码）：
Full width
全屏宽度
<!-- Remove the container class from the slides div -->
<div id="slides">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<!-- Left and right controls -->
</div>
</div>
Image width (shows grey background)
图像宽度（显示灰色背景）
<!-- Wrap carousel-inner in a container div -->
<div id="slides">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="container"> <!-- Added this line -->
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/1280/960" alt="Connect K project" style="width:100%;">
</div>
<div class="item">
<img src="http://lorempixel.com/1280/960" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="http://lorempixel.com/1280/960" alt="MedAppJam project" style="width:100%;">
</div>
</div>
</div> <!-- Added this line -->
<!-- Left and right controls -->
</div>
</div>
I've forked your codepen for an example: https://codepen.io/raptorkraine/pen/Gvaagm?editors=1100#0
我已经将你的代码笔分叉了一个例子：https://codepen.io/raptorkraine/pen/Gvaagm?editors =1100#0
回答by M61Vulcan
This seems a simpler way which worked for me (using bootstrap 4)
这对我来说似乎是一种更简单的方法（使用引导程序 4）
<div id="my-carousel-bg": class="carousel-inner">
with css as usual...
<div id="my-carousel-bg": class="carousel-inner">
像往常一样使用css...
#pwb-carousel-bg {
background-color: grey;
}
回答by Eric
Simply use the already existing class "carousel-inner" in your css file as below, here for example change the background color to black :
只需在您的 css 文件中使用现有的类“carousel-inner”，如下所示，例如将背景颜色更改为黑色：
.carousel-inner {
background-color: black !important;
}
