Bootstrap Carousel图像不能全宽显示

我使用Bootstrap 3创建a simple HTML template。我在中等大小的显示中检查模板，看起来没问题。但是当我在更大的显示器（和更高分辨率）中检查它时，我在传送带内部的图像的右侧看到一些空白区域。Bootstrap Carousel图像不能全宽显示

截图：

enter image description here

我的旋转木马代码：

<!-- 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 -->

如何解决这个问题？

我已经尝试在Carousel类之前插入容器类，但是没有给出全宽旋转木马。我需要全宽转盘，而不是以容器类宽度包装。

来源

2014-01-22 Zulhilmi Zainudin

你应该只是编辑你的原始问题，而不是创建一个新的帖子，因为我没有意识到你想要的全宽。尝试将您的轮播ID设置为宽度：100％。以前没有尝试过，现在没有在我的笔记本电脑上。让我知道，如果它不起作用，我会回头看看它。 –

@JoeConlin我只是尝试Godinall的解决方案，它的工作。 –

在你的CSS

.carousel-inner>.item>img, .carousel-inner>.item>a>img { 
display: block; 
height: auto; 
max-width: 100%; 
line-height: 1; 
width: 100%; // Add this 
}

来源

2014-01-22 05:17:15 Godinall

谢谢！它正在工作。 :) –

这是因为自举不对齐crousel内容居中

你有2个选项

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类= "项" > <格式= "背景图像：网址（IMG/4.JPG）; height：400px; background-size：包含; margin：0px auto;宽度：95％; " > </DIV >
</DIV >

来源

2014-01-22 05:30:17

我只是尝试由Godinall解决方案，它的工作。谢谢你的帮助。真的很有帮助。 :) –

我有这个问题了。就我而言，这是因为原始图像的大小不够大。当我增加图片的大小时，它适合全屏。你可能想试试这个！

来源

2015-04-17 17:23:58

Bootstrap Carousel图像不能全宽显示

回答

相关问题