Bootstrap 3图像不会填充传送带，卡在左边

我一直在试图让这个传送带工作几个小时，但我似乎没有收到所需的结果和文档getbootstrap.com对于涉及到的任何细微差别都没什么特别的（通常你可以复制粘贴他们的代码并且工作正常）。Bootstrap 3图像不会填充传送带，卡在左边

基本上，我有从first example here与我的修改默认代码：

<div class="row"> 

    <div class="col-md-12"> 

     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators --> 
      <ol class="carousel-indicators"> 
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
       <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
       <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
      </ol> 

      <!-- Wrapper for slides --> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <img class="center-block" src="assets/img/rate-shop-black.png"> 
        <div class="carousel-caption"> 
         <h3>Rate Shopping Tool</h3> 
         <p>Always get the best rates possible when using our best-in-class rate shopping tool. 
        </div> 
       </div> 
       <div class="item"> 
        <img class="center-block" src="assets/img/rate-shop-black.png"> 
        <div class="carousel-caption"> 
         <h3>Rate Shopping Tool</h3> 
         <p>Always get the best rates possible when using our best-in-class rate shopping tool. 
        </div> 
       </div> 
       <div class="item"> 
        <img class="center-block" src="assets/img/rate-shop-black.png"> 
        <div class="carousel-caption"> 
         <h3>Rate Shopping Tool</h3> 
         <p>Always get the best rates possible when using our best-in-class rate shopping tool. 
        </div> 
       </div> 
      </div> 

      <!-- Controls --> 
      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
      </a> 

      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
      </a> 
     </div> 

    </div> 
</div>

一个我发现Carousel image doesn't fill the width in bootstrap 3提到的IMG标签设置宽度=“100％”的资源，而且使所述形象爆炸到天文比例。

我发现另一个资源提到使图像大，所以我进入variables.less，发现@screen-lg宽度被设置为这样1200px我回到瘸子和增加了底座画布大小1200px。这样看起来更好，但旋转木马中的图像任一侧仍然至少有一整英寸在.carousel-control元素的渐变开始之前呈现纯白色。

同样值得注意的是，图片“贴”在旋转木马的左侧，除非我将.center-block课程应用于他们，这使我更接近我期望的效果，而不是问题。

我想知道如果我应该再次增加图像大小，如果是这样多少？对于整页（无.container）传送带，图像需要多大？那些包裹在.container的包裹呢？

或者我错过了导致这种情况发生的标记的一部分？

下面是我目前看到正在制作的图像。

Shows current result from the above HTML

来源

2014-02-24 DavidScherer

基本上图像被表现为它应该。将img标签的宽度设置为％100将使图像伸展至其父项的100％。我假设的是.carousel-内部类。所以有两个选择。将.carousel-inner的父宽度设置为所需的px宽度，然后将img标记设置为100％，或者继续调整img标记的大小，直到您满意为止。 –

@AlexGrant我很欣赏，但是当我将图像宽度设置为100％时，它完全填满了屏幕（并且我在一个相当大的显示器上）。你偶然知道我应该使用什么图像大小？ – DavidScherer

那么取决于你的口味。尝试将父级设置为max-width：1400px;宽度：100％; 然后将img标签设置为宽度：100％; –

这里是一个的jsfiddle你。

将父滑块宽度设置为100％，最大宽度为1400px;将在滑块的中心位置并且在大型监视器上时不会变得太大。您可以根据自己的喜好调整最大宽度属性。

http://jsfiddle.net/4sBED/1/

#carousel-example-generic { 
    width: 100%; 
    max-width: 1400px; 
    margin: 0 auto; 
}

来源

2014-02-24 19:13:43

Bootstrap 3图像不会填充传送带，卡在左边

回答

相关问题