Bootstrap轮播图片无法全屏显示

问题描述

我正在使用Bootstrap 3创建。我检查了中等大小的模板显示，看起来还可以。但是，当我在较大的显示屏（和更高的分辨率）中检查它时，在转盘中的图像右侧看到一些空白。

I'm creating a simple HTML template using Bootstrap 3. I check the template in medium size display, it looks ok. But when I check it in larger display (and higher resolution), I see some white space at the right side of the images inside the Carousel.

截屏：

我的轮播代码：

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

如何解决此问题？

我尝试在轮播类之前插入容器类，但是这样不能给我全宽度的轮播。我希望轮播使用完整宽度，而不是包装在容器类的宽度中。

I have try to insert container class before the Carousel class, but that not give me full width Carousel. I want the Carousel in full width, not wrapped in container class width.

推荐答案

在您的CSS中

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

这篇关于Bootstrap轮播图片无法全屏显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！