在Firefox中未對齊的引導程序傳送帶圖像

我使用引導程序3創建了a simple HTML template。我遇到了傳送帶問題。在Firefox瀏覽器中查看時，圖像沒有正確對齊。在Firefox中未對齊的引導程序傳送帶圖像

截圖使用Firefox瀏覽器： enter image description here

截圖使用谷歌瀏覽& Opera是OK： enter image description here

我的旋轉木馬代碼：

<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/1.jpeg"> 
      <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/2.jpeg"> 
      <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/3.jpeg"> 
      <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>

我已經包括jQuery的在<head>標籤和過渡正在起作用。只是有圖像位置的問題。

如何解決這個問題？

來源

2014-01-21 Zulhilmi Zainudin

將旋轉木馬包裝在.container div中。這將以它與您的內容保持一致爲中心。

<div class="container"> 
    <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/1.jpeg"> 
      <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/2.jpeg"> 
      <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/3.jpeg"> 
      <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> 
</div>

來源

2014-01-21 19:38:06

好的謝謝。我只是添加clearfix來解決問題。謝謝你的幫助！ –

添加一個clearfix在Firefox中解決了我的問題。

<div id="myCarousel" class="carousel slide clearfix" data-ride="carousel">

來源

2015-04-14 11:13:31 AlbertVR

在Firefox中未對齊的引導程序傳送帶圖像

回答

相關問題