Misaligned Bootstrap Carousel Изображение в Firefox

Я создаю a simple HTML template используя Bootstrap 3. У меня проблема с карусели. Изображения не соответствовали должным образом при просмотре в браузере Firefox.Misaligned Bootstrap Carousel Изображение в Firefox

Скриншот с помощью браузера Firefox: enter image description here

Скриншот с помощью Google Chrome & Opera ОК: enter image description here

Мой код Carousel:

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

Misaligned Bootstrap Carousel Изображение в Firefox

ответ

Смежные вопросы