Bootstrap funktioniert nicht auf Seite

Meine HTML-Seite funktioniert nicht richtig, aber Bootstrap sollte es funktionieren wie ich will.Ich laden Bootstrap und CSS-Datei auf Seite mit font-awesome.min.css von font-awesome page. Außerdem stelle ich sicher, dass ich alles richtig schreibe. Ich schaue, um zu trösten und zu donnern, dass meine Akten nicht zur Seite einschließen. Wenn Sie eine Frage haben, können Sie mich in Kommentaren fragen.Bootstrap funktioniert nicht auf Seite

Und hier ist mein Code:

@import url('https://fonts.googleapis.com/css?family=Lato|Raleway'); 
 
body { 
 
    background-color: #f2f2f2; 
 
    font-family: "Lato"; 
 
    font-weight: 300; 
 
    font-size: 16px; 
 
    color: #555; 
 
    -webkit-font-smoothing: antialiased; 
 
    -webkit-overflow-scrolling: touch; 
 
    margin-top: 60px; 
 
} 
 

 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6 { 
 
    font-family: Raleway; 
 
    font-weight: 300; 
 
    color: #333; 
 
} 
 

 
p { 
 
    line-height: 28px; 
 
    margin-bottom: 25px; 
 
} 
 

 
.centered { 
 
    text-align: center; 
 
} 
 

 
a { 
 
    color: #f85c37; 
 
} 
 

 
a:hover, 
 
a:focus { 
 
    color: #7b7b7b; 
 
    text-decoration: none; 
 
    outline: 0; 
 
} 
 

 
hr { 
 
    display: block; 
 
    height: 1px; 
 
    border: 0px; 
 
    border-top: 1px solid #ccc; 
 
    margin: 1em 0; 
 
    padding: 0; 
 
} 
 

 
.navbar { 
 
    font-weight: 800; 
 
    fin-sise: 14px; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
} 
 

 
.navbar-inverse { 
 
    background: #2d2d2d; 
 
    border-color: #2d2d2d; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Bootstrap сайт</title> 
 
    <link rel="stylesheet" href="css/bootstrap.css"> 
 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
 
    <link rel="stylesheet" href="css/stylesheet.css"> 
 
</head> 
 

 
<body> 
 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
     <a class="navbar-brand" href="#">PR<i class="fa fa-circle"></i>GER</a> 
 
     </div> 
 
     <div class="navbar-collapse collapse"> 
 
     <!--class="navbar-collapse collapse"--> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#">Домой</a></li> 
 
      <li><a href="#">Про нас</a></li> 
 
      <li><a href="#">Сервсиы</a></li> 
 
      <li><a href="#">Работы</a></li> 
 
      <li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-08-29 Dimas Karpus

Haben Sie versucht, das CDN anstelle der Verwendung einer lokalen Datei mit? https://www.bootstrapcdn.com/ Hinweis Bootstrap verwendet auch eine JS-Datei. – JohnnyBizzle

Definieren "funktioniert nicht" –

was meinst du mit: "funktioniert nicht richtig"? Was genau funktioniert nicht? Haben Sie auf der Konsolen-Netzwerk-Registerkarte nachgesehen, um sicherzustellen, dass die CSS tatsächlich geladen ist? – Tomer

Hallo Der Code Versuchen Sie unter ich seine Arbeits denken.

@import url('https://fonts.googleapis.com/css?family=Lato|Raleway'); 
 

 
body { 
 
    background-color: #f2f2f2; 
 
    font-family: "Lato"; 
 
    font-weight: 300; 
 
    font-size: 16px; 
 
    color:#555; 
 

 
    -webkit-font-smoothing: antialiased; 
 
    -webkit-overflow-scrolling:touch; 
 

 
    margin-top:60px; 
 
} 
 

 
h1, h2, h3, h4, h5, h6{ 
 
    font-family: Raleway; 
 
    font-weight: 300; 
 
    color:#333; 
 
} 
 

 
p{ 
 
    line-height:28px; 
 
    margin-bottom: 25px; 
 
} 
 

 
.centered{ 
 
    text-align: center; 
 
} 
 

 
a{ 
 
    color:#f85c37; 
 
} 
 

 
a:hover, a:focus{ 
 
    color:#7b7b7b; 
 
    text-decoration: none; 
 
    outline: 0; 
 
} 
 

 
hr{ 
 
    display:block; 
 
    height:1px; 
 
    border:0px; 
 
    border-top:1px solid #ccc; 
 
    margin:1em 0; 
 
    padding:0; 
 
} 
 

 
.navbar { 
 
    font-weight: 800; 
 
    fin-sise:14px; 
 
    padding-top:15px; 
 
    padding-bottom:15px; 
 
} 
 

 
.navbar-inverse { 
 
    background: #2d2d2d; 
 
    border-color:#2d2d2d; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<style> 
 
@import url('https://fonts.googleapis.com/css?family=Lato|Raleway'); 
 

 
body { 
 
    background-color: #f2f2f2; 
 
    font-family: "Lato"; 
 
    font-weight: 300; 
 
    font-size: 16px; 
 
    color:#555; 
 

 
    -webkit-font-smoothing: antialiased; 
 
    -webkit-overflow-scrolling:touch; 
 

 
    margin-top:60px; 
 
} 
 

 
h1, h2, h3, h4, h5, h6{ 
 
    font-family: Raleway; 
 
    font-weight: 300; 
 
    color:#333; 
 
} 
 

 
p{ 
 
    line-height:28px; 
 
    margin-bottom: 25px; 
 
} 
 

 
.centered{ 
 
    text-align: center; 
 
} 
 

 
a{ 
 
    color:#f85c37; 
 
} 
 

 
a:hover, a:focus{ 
 
    color:#7b7b7b; 
 
    text-decoration: none; 
 
    outline: 0; 
 
} 
 

 
hr{ 
 
    display:block; 
 
    height:1px; 
 
    border:0px; 
 
    border-top:1px solid #ccc; 
 
    margin:1em 0; 
 
    padding:0; 
 
} 
 

 
.navbar { 
 
    font-weight: 800; 
 
    fin-sise:14px; 
 
    padding-top:15px; 
 
    padding-bottom:15px; 
 
} 
 

 
.navbar-inverse { 
 
    background: #2d2d2d; 
 
    border-color:#2d2d2d; 
 
} 
 
</style> 
 
    
 
</head> 
 
<body> 
 

 
<div class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">PR<i class="fa fa-circle"></i>GER</a> 
 
     </div> 
 
     <div class="navbar-collapse collapse"> <!--class="navbar-collapse collapse"--> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#">?????</a></li> 
 
      <li><a href="#">??? ???</a></li> 
 
      <li><a href="#">???????</a></li> 
 
      <li><a href="#">??????</a></li> 
 
      <li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 
</html>

Quelle

2017-08-29 10:28:30

Danke Typ! Es funktioniert wirklich wie ich will)) –

Willkommen !! Freue mich zu helfen. –

Sie haben einige Tags wichtige Tags im Dokument fehlt. Alle für Sie festgelegt:

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head --> 
    <title>Bootstrap 101 Template</title> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
    <link rel="stylesheet" href="css/stylesheet.css"> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
</head> 

<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">PR<i class="fa fa-circle"></i>GER</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <!--class="navbar-collapse collapse"--> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="active"><a href="#">Домой</a></li> 
        <li><a href="#">Про нас</a></li> 
        <li><a href="#">Сервсиы</a></li> 
        <li><a href="#">Работы</a></li> 
        <li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
</body> 

</html>

Quelle

2017-08-29 10:29:56

Bootstrap funktioniert nicht auf Seite

Antwort

Verwandte Themen