Логотип не отображается в bootstrap navbar

Я занимаюсь бутстрапом и испытываю трудности с отображением логотипа там, где он не отображается. Можете ли вы взглянуть и объяснить, что происходит?Логотип не отображается в bootstrap navbar

HTML5,:

<!DOCTYPE html> 
<html class="responsive"> 
    <head> 
     <title>Whatcha Cravin? | Home</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="assets\css\style.css" type="text/css"> 
     <link rel="stylesheet" href="assets\css\bootstrap.css" type="text/css"> 
     <link rel="stylesheet" href="assets\css\bootstrap.min.css" type="text/css"> 
    </head> 
    <body> 
    <!-- Navbar --> 
     <nav class="nav"> 
      <div class="container"> 
       <div class="pull-left"> 
        <a href="#"> 
         <img href="assets/images/Logo_Transparent_Backround.PNG" class="image-responsive"> 
        </a> 
       </div> 
       <ul class="list-inline pull-right"> 
        <li class="list-unstyled"><a href="#" class="home">Home</a></li> 
        <li class="list-unstyled"><a href="#" class="menu">Our menu</a></li> 
        <li class="list-unstyled"><a href="#" class="about">About Us</a></li> 
        <li class="list-unstyled"><a href="#" class="contact">Contact Us</a></li> 
       </ul> 
      </div> 
      <div class="jumbotron"/> 
     </nav> 
    <!-- /Navbar --> 

    </body> 
</html>

Здесь я не понимаю, может быть, мой CSS неверна?

.nav li a{ 
    color: #000; 
    font-size: 15px; 
    font-weight: bold; 
    padding:14px 10px; 
    text-transform: uppercase; 
} 
.jumbotron{ 
    background-image:url(../images/image1-3-edited_1.jpg); 
    background-repeat:no-repeat; 
    background-size:cover; 
    height:599px; 
    margin-top:3px; 
    width:100%; 
} 
.nav li a:hover{ 
    background-color:#b23739; 
    color:#fff; 
} 
.nav{ 
    margin-top:10px; 
    width:100%; 
} 
.logo{ 
    height:100px; 
    width:200px; 
    margin-top:-100px; 
    overflow:none; 
} 
.list-inline{ 
    vertical-align:auto; 
}

источник

2015-03-13 Siyabonga Ridge Ngcobo

Путь не может быть отнесен к логотипу .. Попробуйте отладить в браузере. Посмотрите, есть ли у вас ошибка консоли? –

Изменить href на src в теге img.

источник

2015-03-13 09:47:09

Большое вам спасибо. Это сработало! Я не могу поверить, что никогда не замечал этого. –

При вызове изображения, которое вы должны использовать

<img src="someImage.jpg" alt="" />

Я изменил код в скрипке здесь является обновленной

http://jsfiddle.net/ccedgLqy/

<body> 
<!-- Navbar --> 
    <nav class="nav"> 
     <div class="container"> 
      <div class="pull-left"> 
       <a href="#"> 
        <img src="http://www.xbox.com/shell/images/shell/XboxLogo.png" class="image-responsive"> 
       </a> 
      </div> 
      <ul class="list-inline pull-right"> 
       <li class="list-unstyled"><a href="#" class="home">Home</a></li> 
       <li class="list-unstyled"><a href="#" class="menu">Our menu</a></li> 
       <li class="list-unstyled"><a href="#" class="about">About Us</a></li> 
       <li class="list-unstyled"><a href="#" class="contact">Contact Us</a></li> 
      </ul> 
     </div> 
     <div class="jumbotron"/> 
    </nav> 
<!-- /Navbar --> 

</body> 

.nav li a{ 
color: #000; 
font-size: 15px; 
font-weight: bold; 
padding:14px 10px; 
text-transform: uppercase; 
} 
.jumbotron{ 
    background-image:url(../images/image1-3-edited_1.jpg); 
    background-repeat:no-repeat; 
    background-size:cover; 
    height:599px; 
    margin-top:3px; 
    width:100%; 
} 
.nav li a:hover{ 
background-color:#b23739; 
color:#fff; 
} 
.nav{ 
margin-top:10px; 
width:100%; 
} 
.logo{ 
    height:100px; 
    width:200px; 
    margin-top:-100px; 
    overflow:none; 
} 
.list-inline{ 
    vertical-align:auto; 
}

источник

2015-03-13 10:02:42 josh

Логотип не отображается в bootstrap navbar

ответ

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