twitter-bootstrap 如何使 Bootstrap 中的轮播标题响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24889767/
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 make carousel caption in Bootstrap responsive?
提问by
I have been trying to make my carousel in Bootstrap 3.2 responsive. But I just can't seem to get my caption to resize with the image in my carousel. I think it has to do with the "item" class and how it doesn't resize with the browser. I think it might have to do with @media, but if it does, I don't know what to put there.
我一直在尝试使 Bootstrap 3.2 中的轮播响应式。但我似乎无法让我的标题随着我的旋转木马中的图像调整大小。我认为这与“项目”类以及它如何不随浏览器调整大小有关。我认为这可能与 有关@media，但如果确实如此，我不知道该放什么。
Here is my basic HTML carousel slide:
这是我的基本 HTML 轮播幻灯片：
<div class="item">
<img src="http://goo.gl/PK4Kkh" alt="Third Slide">
<div class="carousel-caption">
<h1>Test</h1>
<p>Test</p>
<p><a class="btn btn-lg btn-primary" href="#button3" role="button">Button 3</a></p>
</div> <!-- End of Carousel Caption -->
</div> <!-- End of Item -->
And my CSS:
还有我的 CSS：
.carousel
{
height: 720px;
margin-bottom: 0px;
}
.carousel-caption
{
z-index: 10;
}
.carousel .item
{
height: 720px;
background-color: #777;
}
.carousel-inner > .item > img
{
position: absolute;
top: 51px;
left: 0;
min-width: 100%;
}
采纳答案by Aibrean
The problem isn't that the carousel is not responsive. The problem is you have a fixed height on the carousel and carousel item. You'll need to provide more code than what you have now. What you have provided code-wise is not technically a carousel. If you want the background image to take up the entire screen, you should make it 100% height.
问题不在于轮播没有响应。问题是您在旋转木马和旋转木马项目上有一个固定的高度。您需要提供比现在更多的代码。您在代码方面提供的内容在技术上不是轮播。如果您希望背景图像占据整个屏幕，则应使其高度为 100%。
If what you are trying to achieve is a full-width/height carousel, check out http://www.bootply.com/89646
如果您要实现的是全宽/高轮播，请查看http://www.bootply.com/89646
In tablet/mobile if it's just a matter of the space not being filled up correctly, you can use a media query to override the heights of the item and carousel and image at those breakpoints.
在平板电脑/移动设备中，如果只是空间没有被正确填充的问题，您可以使用媒体查询来覆盖这些断点处的项目和轮播和图像的高度。
回答by tim
I use something like this for responsive captions:
我使用这样的东西作为响应式字幕：
<script>
$(document).ready(function() {
$('.carousel .carousel-caption').css('zoom', $('.carousel').width()/1250);
});
$(window).resize(function() {
$('.carousel .carousel-caption').css('zoom', $('.carousel').width()/1250);
});
</script>
Where 1250 is the maximum pixel width of the slider in full mode.
其中 1250 是全模式下滑块的最大像素宽度。
Use percentages if you are positioning the caption by coordinates. If you wanna support all browsers see complete styles for cross browser CSS zoomand http://caniuse.com/#search=zoom.
如果按坐标定位标题，请使用百分比。如果您想支持所有浏览器，请查看跨浏览器 CSS 缩放和http://caniuse.com/#search=zoom 的完整样式。
回答by Luke
These people. What you need my friend is a set of media queries which will then give you full control over the carousel elements on every screen, desktop, tablet and mobile. Text does in fact scale by default. Pretty ambitious to dive straight into bootstrap after just learning HTML - fair play.
这些人。我的朋友，您需要的是一组媒体查询，然后您就可以完全控制每个屏幕、台式机、平板电脑和移动设备上的轮播元素。默认情况下，文本确实会缩放。在学习 HTML 后直接进入引导程序非常雄心勃勃 - 公平竞争。
These links may help. I would also suggest when your getting better try using LESS as this is much quicker for development.
这些链接可能会有所帮助。我还建议当您变得更好时尝试使用 LESS，因为这对于开发来说要快得多。
http://www.revillweb.com/tutorials/bootstrap-tutorial/
http://www.revillweb.com/tutorials/bootstrap-tutorial/
http://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/
http://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/
