Javascript 引导转盘图像未全宽显示
我正在使用Bootstrap3创建。我检查了中等大小的显示模板,它看起来不错。但当我在更大的显示器(和更高的分辨率)中查看时,我看到旋转木马内图像右侧有一些空白 截图: 我的旋转木马代码:Javascript 引导转盘图像未全宽显示,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我正在使用Bootstrap3创建。我检查了中等大小的显示模板,它看起来不错。但当我在更大的显示器(和更高的分辨率)中查看时,我看到旋转木马内图像右侧有一些空白 截图: 我的旋转木马代码: <!-- Carousel ================================================== --> <div class="clearfix"></div> <div id="myCarousel" class="
<!-- Carousel
================================================== -->
<div class="clearfix"></div>
<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">
<div class="item active">
<img src="img/4.jpg">
<div class="container">
<div class="carousel-caption">
<h1>
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">
Call to Action
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="img/5.jpg">
<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">
Register Now
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="img/6.jpg">
<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">
Read Blog
</a>
</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left">
</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right">
</span>
</a>
</div>
<!-- end #mycarousel -->
示例标题。
我是奥迪奥先生,我是艾格斯塔·艾格特·奎姆先生。Donec在eget metus为非mi porta孕妇确定了最佳身份。我不知道是谁干的,我不知道是谁干的。
另一个例子是标题。
我是奥迪奥先生,我是艾格斯塔·艾格特·奎姆先生。Donec在eget metus为非mi porta孕妇确定了最佳身份。我不知道是谁干的,我不知道是谁干的。
再来一杯。
我是奥迪奥先生,我是艾格斯塔·艾格特·奎姆先生。Donec在eget metus为非mi porta孕妇确定了最佳身份。我不知道是谁干的,我不知道是谁干的。
如何解决这个问题
我曾尝试在Carousel类之前插入container类,但这并不能提供全宽度的Carousel。我希望旋转木马是全宽的,而不是用容器类宽度包装。在css中
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
display: block;
height: auto;
max-width: 100%;
line-height: 1;
width: 100%; // Add this
}
这是因为引导不会将crousel内容与中心对齐 你有两个选择 1。在CSS中进行更改并将其对齐中心
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
height: auto;
line-height: 1;
margin: 0 auto;
max-width: 100%;
}
2。不要在div中使用背景图像,如
<div class="item">
<div style="background-image: url(img/4.jpg); height: 400px;background-size: contain; margin: 0px auto; width: 95%;">
</div>
</div>
我也有这个问题。在我的例子中,这是因为原始图像的大小不够大。当我增大图片的尺寸时,它适合全屏显示。你可能想试试这个 你应该编辑你的原始问题,而不是创建一个新的帖子,因为我不知道你想要全幅。尝试将转盘ID设置为宽度:100%。以前没有尝试过,现在我的笔记本电脑上没有。如果它不起作用,请告诉我,我会在回去后再看。@JoeConlin我只是尝试Godinall的解决方案,它就起作用了。我只是尝试Godinall的解决方案,它就起作用了。谢谢你的帮助。真的很有帮助。:)