2016-05-25 20 views
0

Google Chromeブラウザとブートストラップにいくつか問題があります。Chromeでブートストラップコンテナクラスが動作しない

  1. Google Chromeの場合を除き、すべてのブラウザにコンテンツを配置している のHTMLセクションの1つにコンテナがあります。
  2. ビューポートウィンドウの100%にまたがっていないので、コンテナ流体であるかのように動作しているように見えます。左右に余白が約5pxの と表示されます。再び、 のChromeでのみここで

はちょうどそのセクションのための私のコードです:

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hD djZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,300italic,300' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="main.css"> 
</head> 
<body> 
<section id="aboutUs"> 
    <div class ="groupImg"> 
      <div class="container"> 
       <h1>About Us</h1> 
       <p class = "motto col-md-12"><i> 
        “As a multicultural dance company, C.O.D.A. prides itself in the versatility of dance styles and creative ideas within the company. Understanding the authenticity and history of Hip Hop, we embrace all styles including street, footworking, house, breakdancing, popping, locking, tutting, freestyling, new school, old school and more. With dancers that come from both trained and untrained backgrounds, we can appreciate the possession of raw talent and acknowledge the importance of discipline and training. C.O.D.A. aims to share the common interest of Hip Hop to all people and to demonstrate a mutual understanding and respect for other dancers alike.”</i> 
       </p> 
      </div> 
    </div> 
</section> 
</body> 
</html> 

CSS:

#aboutUs h1 { 
    color:white; 
    font-size:40px; 
    padding: 40px 0px 20px 0px; 
    text-align: center; 
    text-transform: uppercase; 

} 

.motto{ 
    color:white; 
    font-size:20px; 
    font-weight: 300; 
    line-height: 2.0em; 
    text-align: center; 
} 

.groupImg { 
    background-image: url("img/5color_maroon.jpg"); 
    background-size: 100%; 
    background-repeat: no-repeat; 
    height: 750px; 

} 
ここ

各ブラウザでのスクリーンショットです:

Here is what it looks like in Chrome

Here is what it looks like in Safari

Here is what it looks like in Firefox

は、私はそれを正しくリンクされていなかったのか、私は何かが足りないのですか? ありがとう!

+1

[Chromeではうまく動作しています](https://jsfiddle.net/fs66pxkn/)。 'main.css'が何か問題を引き起こしていないと確信していますか? – hungerstar

答えて

0

現在のCDNコードでCDNリファレンスを置き換えてください。あなたは<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">その作業を使用することがあります。あなたのmain.cssに間違いがあるかもしれません。

+0

しかし、私はcdnコードで何か違うものがあることを試してみました。 – Shadow

+0

これらは同じファイルである必要があります。私は、完全性の文字列が何とかOPの投稿で修正されているのを見ていますが。それは '8hDDdjZl'でなければならない' 8hD djZl'です。それが問題になるかどうかはわかりません。 – hungerstar

+0

しかし、それが私のmain.cssファイルに問題があった場合、それはSafariとFirefoxでも問題にはなりませんか? – newman

関連する問題