ブートストラップがhtmlで動作しません

"プル左"クラスは機能しません。ロゴは左に浮かびません。ボディータグの背景色も見えません。誰かが私が間違っていると説明できますか？ index.htmlファイルとブートストラップファイルは同じディレクトリにあります。タグもチェックしましたが、タイプミスが見つかりませんでした。ブートストラップ4プル右、プル左にブートストラップがhtmlで動作しません

body { 
 
    font-size: 16px; 
 
    font-family: font-family: 'Oxygen', sans-serif; 
 
    background-color: #61122f; 
 
    color: #fff; 
 
} 
 

 
#header-nav { 
 
    background-color: #f6b319; 
 
    border-radius: 0; 
 
    border: 0; 
 
} 
 

 
#logo-img { 
 
    background: url('https://scontent-sea1-1.cdninstagram.com/t51.2885-19/s150x150/17437826_285820131856427_2792512281873743872_a.jpg') no-repeat; 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: 10px 15px 10px 0; 
 
} 
 

 
.navbar-brand { 
 
    padding: 25px; 
 
} 
 

 
.navbar-brand h1 { 
 
    font-family: 'Lora', serif; 
 
    color: #557c3e; 
 
    font-size: 1.5em; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    text-shadow: 1px 1px 1px #222; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    line-height: 0.75; 
 
} 
 

 
.navbar-brand a:hover, 
 
.navbar-brand a:focus { 
 
    text-decoration: none; 
 
} 
 

 
.navbar-brand p { 
 
    color: #000; 
 
    text-transform: uppercase; 
 
    font-size: .7em; 
 
    margin-top: 15px; 
 
} 
 

 
.navbar-brand p span { 
 
    vertical-align: middle; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA Compatible" content="IE-edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>David Chu's China Bistro</title> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 

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

 
    <link rel="stylesheet" href="css/styles.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet" type="text.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lora:400,700" rel="stylesheet" type="text/css"> 
 

 
</head> 
 

 
<body> 
 
    <p></p> 
 
    <header> 
 
    <nav id="header-nav" class="navbar navbar-default"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <a href="index.html" class="pull-left"> 
 
      <div id="logo-img" alt="Logo image"></div> 
 
      </a> 
 
      <div class="navbar-brand"> 
 
      <a href="index.html"> 
 
       <h1>David Chu's China Bistro</h1> 
 
      </a> 
 
      <p> 
 
       <img src="https://www.davidchuschinabistro.com/images/star-k-logo.png" alt="Kosher Certification"> 
 
       <span>Kosher Certified</span> 
 
      </p> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </nav> 
 
    </header> 
 
    <h1></h1> 
 

 

 
    <!-- jQuery (bootstrap JS plugins depend on it) --> 
 
    <script src="js/jquery-3.2.1.min.js"></script> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    <script src="js/script.js"></script> 
 
</body> 
 

 
</html>

出典

2017-12-13 Krishna

プルSM右ために、プルSM/XS/MD/LG-残され

変更されました/なし/右

背景色が適用されている必要があります

ボディは....それは可能..ちょうど体のかなり大きな高さを指定することで確認することがあるため、高さのちょうど表示されていない

出典

2017-12-13 06:13:08

ブートストラップ中4 pull-right,pull-leftはfloat-right,float-leftで変更されています。

また、ブートストラップのCSSファイルが他のreboot.scssファイルと競合しているため、背景色が表示されません。

あなたは競合を解決するために、次のようにCSSプロパティを使用することができます。

body { 
    font-size: 16px !importnat; 
    font-family: 'Oxygen', sans-serif !importnat; 
    background-color: #61122f !importnat; 
    color: #fff !importnat; 
}

私は、私はそれはあなたが

出典

2017-12-13 08:28:09

助けいただければ幸いですfloat-left

<a href="index.html" class="float-left"> <div id="logo-img" alt="Logo image"></div> </a>

でpull-leftクラスを変更するHTMLタグがありますそれがあなたを助けてくれてうれしい！そして、答えをチェックすることを忘れないでください。：）がんばろう！ –

ブートストラップがhtmlで動作しません

答えて

関連する問題