Question

我在使用Google Chrome浏览器和Bootstrap时遇到了一些问题。

我的一个HTML部分中有一个容器将所有浏览器中的内容集中在谷歌浏览器之外。
它似乎表现得像是一个容器流体，因为它没有跨越100％的视口窗口，它似乎有左侧和右侧约5px的边距。再次，仅在铬。

以下是我的代码：

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

我没有正确链接它还是我错过了什么？谢谢！

Answer 1

请使用当前的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有任何错误。

Bootstrap容器类无法在Chrome

1 个答案: