Bootstrap 3 Проблема с карусельной машиной, пустой экран

Пробовал внедрять каретку бутстрапа на мой сайт. Результат я получаю ниже. Мысли? Я не думаю, что это проблема CSS, но я не слишком уверен. Я огляделся и не мог найти окончательного ответа относительно того, почему моя реализация не выходит правильно.Bootstrap 3 Проблема с карусельной машиной, пустой экран

<!DOCTYPE html> 
<html> 
<head> 
<meta charset = "UTF-8"> 
<title>Welcome</title> 
<link href ="WorkingFolder/css/bootstrap_custom/bootstrap.css" rel ="stylesheet"> 
</head> 
<body> 
    <nav class="navbar navbar-inverse navbar-fixed-right"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     <a class="navbar-brand" href ="#">|X|</a> 
     </div> 

     <!--Navigation control--> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href ="#">Home</a></li> 
      <li><a href="Portfolio.html">Portfolio</a></li> 
      <li><a href ="Services.html">Services</a></li> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </nav> 
    <div class ="container"> 
     <div id="mycarousel" class="carousel slide" data-ride="carousel"> 
      <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"> 
       <div class="slide1"></div> 
       <div class="carousel-caption"> 
        <h1>William Xavier Fernandez</h1> 
        <p>|X|</p> 
        <p><a href="#" class="btn btn-primary btn-sm">More  Detail</a></p> 
    </div> 
    </div> 
    <div class="item"> 
     <div class="slide2"></div> 
    <div class="carousel-caption"> 
     <h1>Web Design|Bootstrap|JQuery|</h1> 
     <p>|X|</p> 
     </div> 
     </div> 
      <div class="item"> 
       <div class="slide3"></div> 
       <div class="carousel-caption"> 
       <h1>View my portfolio of work above</h1> 
       <p>|X|</p> 
      </div> 
      </div> 
     </div> 

    <!--Navigation control--> 
    <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> 
    <div class="container"> 
    <p>blah blah blah blah blah blah</p> 
    <p>blah blah blah blah blah blah</p> 
    <p>blah blah blah blah blah blah</p> 
    </div> 
    <script src = "WorkingFolder/jquery-3.0.0.min.js"></script> 
    <script src="WorkingFolder/js/bootstrap.min.js"></script> 

</body>

The result I get

источник

2016-07-12 William Fernandez

Это не ясно, что этот вопрос может быть из вашего кода/скриншота. Ваш снимок экрана показывает правильную загрузку карусели, поскольку ваш код не имеет фонового изображения. Значки, похоже, не загружаются должным образом и, вероятно, это проблема с CSS (что-то переопределяет их настройку шрифта) –

Спасибо, человек, это были проблемы с CSS, которые я исправил, перейдя в файл CSS и прокомментировав несколько вещей , Спасибо за быстрый ответ. –

Глядя на документации бутстраповской это выглядит как они получили img настройки фона слайдов и вы используете DIV, классифицируемых с горкой номер ... Я не знаю, если это единственная причина здесь, но я сделал скрипку, где вместо использования

<div class="slide2"></div>

Я положил;

<img src="image.jpg"/>

и все это работает, насколько я могу судить.

https://jsfiddle.net/at4x4w8v/2/

источник

2016-07-12 20:08:24 HisPowerLevelIsOver9000

работал, спасибо, человек оценил это –

Bootstrap 3 Проблема с карусельной машиной, пустой экран

ответ

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