twitter-bootstrap Bootstrap Carousel - 使标题响应窗口高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29703330/
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
Bootstrap Carousel - Make caption responsive to window height
提问by user2100620
I've got a Bootstrap carousel implemented on my page and for some reason I cannot get the caption text to re-position according to the size of the web browser.
我在我的页面上实现了 Bootstrap 轮播，由于某种原因，我无法根据 Web 浏览器的大小重新定位标题文本。
Here is my HTML code:
这是我的 HTML 代码：
<!-- =======================CAROUSEL=========================== -->
<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>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="img/main-banner.png" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Democratizing the Internet of Things!</h1>
<p><a class="btn btn-lg btn-primary" href="./index.php?d=splash" role="button">Try Splash</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="img/banner-2.png" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another Heading!</h1>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I'm using Bootstrap CDN:
我正在使用 Bootstrap CDN：
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
These are all my CSS changes I've made to the carousel:
这些是我对轮播所做的所有 CSS 更改：
.carousel-caption {
position: relative !important;
width: 550px;
top: 210px;
left: 380px !important;
z-index: 600;
max-height:177px;
}
.carousel-caption h1 {
font-family: sans-serif !important;
font-size: 44px !important;
font-weight: 700 !important;
line-height:36px !important;
color: #444 !important;
margin: 0px !important;
padding: 0px !important;
text-shadow: 0px 0px 4px #fff !important;
text-align: left !important;
}
.carousel-caption p {
margin-top: 11px !important;
font-size:18px !important;
line-height:21px !important;
color:#333 !important;
padding-bottom: 11px !important;
margin-bottom: 11px !important;
text-shadow: 0px 0px 4px #fff !important;
text-align: left !important;
}
.carousel-control.left, .carousel-control.right {
background-image: none !important;
}
.carousel-indicators {
left: 405px !important;
}
This is what the carousel looks at full screen:
这是轮播在全屏时的样子：
And here's what happens as I start to change the size of the web browser:
这是当我开始更改 Web 浏览器的大小时发生的情况：
I have tried all the different type of positions, but for the life of me cannot figure out what I'm doing wrong. Any help is appreciated!
我尝试了所有不同类型的职位，但我一生都无法弄清楚我做错了什么。任何帮助表示赞赏！
回答by user2100620
To vertically align the caption in the center I used the CSS function translateYor property transform.
为了垂直对齐中心的标题，我使用了 CSS 函数translateY或属性transform。
I also wanted the caption to be placed directly beside the left carousel control.
我还希望将标题直接放置在左侧轮播控件旁边。
I also removed extra bottom space that was added by the default bootstrap CSS.
我还删除了默认引导 CSS 添加的额外底部空间。
.carousel-caption {
width: 550px;
left: 15%;
top: 50% !important;
transform: translateY(-50%);
text-align: left;
bottom: initial;
}
The caption now appears properly regardless of the screen size:
无论屏幕大小如何，标题现在都能正确显示：
回答by mvlaicevich
I do the carrousel responsive using
我做旋转木马响应使用
@media (max-width: 767px) { specific size style }
@media (max-width: 767px) { 特定尺寸样式}
And add my style for that size, I use tree different sizes for get all align for any screen size.
并为该尺寸添加我的样式，我使用不同尺寸的树来对齐任何屏幕尺寸。
