부트 스트랩 왼쪽 및 오른쪽 글리프 아이콘이 회전식 슬라이드 쇼에 표시되지 않습니까?

두 개의 왼쪽 및 오른쪽 갈매기 모양이 보이지 않고 작동하지만 어떤 이유로 인해 사각형 상자가 표시됩니다. 글리 히콘이있는 위치를 클릭하면 그림을 스크롤 할 수 있으므로 일반적으로 예상되는 왼쪽 및 오른쪽 화살표가있는 글리 핀 콘의 모양이 맞지 않습니까?부트 스트랩 왼쪽 및 오른쪽 글리프 아이콘이 회전식 슬라이드 쇼에 표시되지 않습니까?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Student Association</title> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
</head> 
<body> 
    <div class="carousel slide" data-ride="carousel" id="carousel-ex"> 
     <ol class="carousel-indicators"> 
      <li class="active" data-slide-to="0" data-target="#carousel-ex"></li> 
      <li data-slide-to="1" data-target="#carousel-ex"></li> 
      <li data-slide-to="2" data-target="#carousel-ex"></li> 
      <li data-slide-to="3" data-target="#carousel-ex"></li> 
      <li data-slide-to="4" data-target="#carousel-ex"></li> 
      <li data-slide-to="5" data-target="#carousel-ex"></li> 
     </ol> 
     <div class="carousel-inner"> 
      <div class="item active"><img alt="abuja" class="img-responsive" id= 
"afCountries" src="img/african-countries/abuja-nigeria.jpg"> 
       <div class="carousel-caption"> 
        <h3>Abuja, Nigeria</h3> 
       </div> 
      </div> 
      <div class="item"><img alt="accra" class="img-responsive" id="afCountries" src= 
"img/african-countries/accra-ghana.jpg"> 
       <div class="carousel-caption"> 
        <h3>Accra, Ghana</h3> 
       </div> 
      </div> 
      <div class="item"><img alt="kigali" class="img-responsive" id="afCountries" 
src="img/african-countries/kigali-rwanda.jpg"> 
       <div class="carousel-caption"> 
        <h3>Kigali, Rwanda</h3> 
       </div> 
      </div> 
      <div class="item"><img alt="durban" class="img-responsive" id="afCountries" 
src="img/african-countries/durban-southafrica.jpg"> 
       <div class="carousel-caption"> 
        <h3>Durban, South Africa</h3> 
       </div> 
      </div> 
      <div class="item"><img alt="Johannesburg" class="img-responsive" id= 
"afCountries" src="img/african-countries/Johannesburg-South_Africa.jpg"> 
       <div class="carousel-caption"> 
        <h3>Johannesburg, South Africa</h3> 
       </div> 
      </div> 
      <div class="item"><img alt="kenya" class="img-responsive" id="afCountries" src= 
"img/african-countries/kenya.jpg"> 
       <div class="carousel-caption"> 
        <h3>Kenya</h3> 
       </div> 
      </div> 
     </div> 
     <a class="left carousel-control" data-slide="prev" href= 
"#carousel-ex"><span class="glyphicon glyphicon-chevron-left"></span></a> 
     <a class="right carousel-control" data-slide="next" href= 
"#carousel-ex"><span class= 
"glyphicon glyphicon-chevron-right"></span></a> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">   </script> 
</body> 
</html>

출처

2014-12-18 user2668069

죄송합니다. 문제를 재현하지 못했습니다. 나는 Bootply : http://www.bootply.com/x9VUw3LOO6에서 문제를 재현하려고 시도했다. 테스트를 위해 다양한 크기의 이미지를 봤지만 이미지가 발견되지 않았을 때 (이미지에 잘못된 URL 주소가 있음) 컨베이어에서 사각형 상자가있는 유일한 경우였습니다. 누군가가 Bootply 테스트를보기로 결정했다면, 그 이미지가 저에게 (신속하게) 선택되었음을 명심하십시오. – jyrkim

Jyrkim과 유사하게 솔루션은 Bootply 및 JSFiddle 같은 편집기와 함께 작동합니다. 내 생각에 부트 스트랩 폴더의 글꼴 섹션이 누락되었습니다. White Squares은 사용자 지정 글꼴의 특수 문자처럼 현재 글꼴 유형에서 찾을 수없는 문자의 자리 표시 자입니다. * 또는 & 대신에 []으로 렌더링 될 수 있습니다. 부트 스트랩의 폴더 구조는 다음과 같이 설정되어 있는지 확인합니다 :

bootstrap 
-> css 
    -> bootstrap-theme.css 
    -> bootstrap-theme.css.map 
    -> bootstrap-theme.min.css 
    -> bootstrap.css 
    -> bootstrap.min.css 
    -> theme.css 
-> fonts 
    -> glyphicons-halflings-regular.eot 
    -> glyphicons-halflings-regular.svg 
    -> glyphicons-halflings-regular.ttf 
    -> glyphicons-halflings-regular.woff 
-> js 
    -> bootstrap.js 
    -> bootstrap.min.js

내가 fonts 폴더가 아니거나 제대로 연결하지 않는 것이 돈을 내기 것이다. 폴더 구조가 위와 같으면 다음과 같이 .css 파일을 연결할 수 있습니다.

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

희망이 있습니다. 참고

이 문제가되지 않을 것이 아니라로드 시간을 증가시킬 수 있습니다 원인이됩니다 스타일 시트의 CDN 버전을 사용

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

출처

2014-12-18 21:51:41

도와 줘서 다행입니다. –

부트 스트랩 왼쪽 및 오른쪽 글리프 아이콘이 회전식 슬라이드 쇼에 표시되지 않습니까?

답변

관련 문제