Question

我正在使用Bootstrap 3创建a simple HTML template。我检查中等大小的模板，看起来没问题。但是当我用更大的显示器（以及更高的分辨率）检查它时，我看到旋转木马内部图像右侧有一些空白区域。

截图：

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类之前插入容器类，但是没有给我全宽度的Carousel。我希望Carousel全宽，不要用容器类宽度包装。

Answer 1

在你的CSS中

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

Answer 2

这是因为bootstrap没有将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中使用背景图像

＆lt; div class =＆＃34; item＆＃34;＆gt; ＆lt; div style =＆＃34; background-image：url（img / 4.jpg）;身高：400px; background-size：包含;保证金：0px auto;宽度：95％;＆＃34;＆gt;＆lt; / div＆gt;
＆LT; / DIV＆GT;

Answer 3

我也有这个问题。在我的情况下，原因是原始图像的大小不够大。当我增加图片的大小时，它适合全屏。你可能想尝试这个！

Bootstrap Carousel图像不以全宽显示

3 个答案: