问题描述
我试图向此页面添加轮播，因此当在移动设备上查看轮播时，轮播会调整，目前它会缩小到不可见的大小（可能很简单，但这是我的第一个引导圈！）
am trying to add a carousel to this page, so when it is viewed on a mobile device the carousel adjusts, currently it squeezes down to size and is un viewable (sorry its probably simply, but this is my first rodeo with bootstrap!)
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>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="imgs/facebook%20page.jpg" alt="First slide">
<div class="container">
<!--<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>-->
</div>
</div>
<div class="item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</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><!-- /.carousel -->
/* CUSTOMIZE THE NAVBAR
---------------------------------------------- * /
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
我可能用过多的代码来轰炸这个问题... noob！
I've probably bombarded the question with too much code...such a noob!
提前感谢
推荐答案
做引导旋转木马给项目类一个百分比的底层，而不是给一个高度，然后玩这个百分比，直到你得到所需的高度。这将使他们响应和调整与屏幕。然后，不是将图像放在轮播内部，而是给每个轮播项目另一个类，如第一项，第二项，第三项等等。然后给这个类在你的CSS中的背景图像。你可以给项目a类 background-size：cover; 和后台位置：center; 。然后，不是在你的旋转木马上有一个h1标签，我喜欢只是把一个p标签，并给它一类旋转木马标题，然后在你的其他p标签给它一类旋转木马描述。我不喜欢把h1标签放在轮播中的原因是，您的页面上应该只有一个h1标签，你可以指定稍后，但如果你想要的h1标签在旋转木马只给它一类旋转木马标题。你可以在css中的samller屏幕上调整这些元素中的文本大小。
So what I like to do with bootstrap carousels are give the item class a pading-bottom of a percentage instead of giving a height then play with this percentage untill you get the desired height. This will make them responsive and resize with the screen. Then instead of putting the image inside of the carousel give each carousel item another class like first-item, second-item, third-item and so forth. Then give this class a background image in your css. You can give the class of item a background-size:cover; and a background position: center;. Then instead of having an h1 tag in your carousel I like to just put a p tag and give it a class of carousel heading and then in your other p tag give it a class of carousel description. The reason I don't like to put h1 tags in the carousel is because there should be only one h1 tag on your page and you can specify that later but you if you want the h1 tag in the carousel just give it a class of carousel heading. The you can resize the text in these elements at samller screens in your css. So hopefully all of that made sense.
检查这个JSFiddle并拖动显示窗口，以便可以看到它的大小调整 -
Check out this JSFiddle and drag the display window so you can see it resize- JSFiddle
然后这里是你的html和css：
Then here is your html and css:
您的Css：
#myCarousel .item{
padding-bottom: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 250px;
}
#myCarousel .first-item{
background-image: url('http://placehold.it/500x500');
}
#myCarousel .second-item{
background-image: url('http://placehold.it/500x500');
}
#myCarousel .third-item{
background-image: url('http://placehold.it/500x500');
}
#myCarousel .carousel-heading{font-size: 40px;}
@media screen and (max-width: 767px){
#myCarousel .carousel-heading{font-size: 18px;}
#myCarousel .carousel-description{font-size: 12px;}
#myCarousel .btn-primary{font-size: 14px;}
}
您的Html：
<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>
<div class="carousel-inner" role="listbox">
<div class="item active first-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading</p>
<p class="carousel-description">Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item second-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading</p>
<p class="carousel-description">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item third-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading</p>
<p class="carousel-description">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</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><!-- /.carousel -->
这篇关于引导旋转木马与移动尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！