我对bootstrap相当新，我正试图找出测试网站的一些代码。我遇到了bootstrap的问题，我设置了一个元素并将2个元素放入其中。左边是一个段落（我计划稍后更改为更大的元素），右边是一个图像（我不认为维度很重要）。我注意到行元素没有占据屏幕的整个宽度，并认为这是因为它内部的元素。我进入我的CSS文件进行故障排除，设置行类＆＃39;宽度为100％，然后返回我的网站并打开了Chrome的开发工具。我注意到容器div在两侧都有左右边距，导致行div占用较少的空间并将其自身置于容器的元素内。我将margin的左右值都设置为0px并返回到站点。左边缘消失了，虽然Chrome的检查显示没有右边距，但当我在容器元素上方盘旋时它仍然出现。我不认为这是一个特异性错误，因为左边距消失但不是正确。我真的很难过。正如我所提到的，我对Bootstrap相当新，所以这个问题可能很明显。我检查确保我正确输入了所有语法的右边距，这对我来说很正常。但是，我向您展示的代码没有对容器和行进行的修改。我给你的代码是正常的（除了容器居中）。
如果有一些奇怪的间距问题，我道歉。我为每行代码手动间隔4次，所以如果不存在4个空格，我很抱歉。
.header .jumbotron {
color: #fff;
background-color: #a1ff7c;
font-family: Roboto Condensed;
margin-bottom: 0px;
}
.navbar-default {
background-color: #78c45a;
border: 0px;
font-family: Roboto Condensed;
}
.gallery .container {
font-family: Roboto Condensed;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar- nav > .active > a:focus {
color: white;
/*BACKGROUND color for active*/
background-color: #78c45a;
}
.navbar-default .navbar-nav > .active > a:hover {
background-color: #5a9344;
color: #fff;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-default .navbar-nav > li > a:hover {
color: #fff;
background-color: #5a9344;
}
.navbar-default .navbar-brand {
color: #fff;
}
.navbar-default .navbar-brand:hover {
background-color: #5a9344;
color: #fff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-toggle {
border: 0px;
}
.navbar-default .navbar-toggle:hover {
background-color: #5a9344;
;
}
p {
font-family: Roboto Condensed;
}<html lang="en">
<head>
<title>Hope's Seed</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" h ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css? family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="jumbotron text-center">
<h1>Hope's Seed</h1>
<p>You're Not Alone</p>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="hopesseed.html">Hope's Seed</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">About</a>
</li>
<li><a href="#">Sponsors</a>
</li>
<li><a href="#">Donate</a>
</li>
<li><a href="#">Services</a>
</li>
<li><a href="#">More</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="Intro">
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>Enriching the lives of children who are medically fragile and terminally ill.</p>
</div>
<div class="col-sm-3">
<img src="Images/image1.png" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="gallery">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Family Support</h3>
<p>Hope's Seed is here to support you.</p>
</div>
<div class="col-sm-4">
<h3>Volunteer Opportunities</h3>
<p>Hope's Seed has many ways to volunteer.</p>
</div>
<div class="col-sm-4">
<h3>Giving Opportunities</h3>
<p>Enriching the lives of Texas children who are medically fragile and terminally ill.</p>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
尝试使用'container-fluid'
<title>Hope's Seed</title>
<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.1.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<body>
<div class = "header">
<div class="jumbotron text-center">
<h1>Hope's Seed</h1>
<p>You're Not Alone</p>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="hopesseed.html">Hope's Seed</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">More</a></li>
</ul>
</div>
</div>
</nav>
<div class="Intro">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Enriching the lives of children who are medically fragile and terminally ill.</p>
</div>
<div class="col-sm-3">
<img src="Images/image1.png" class="img-responsive">
</div>
</div>
</div>
</div>
<div class = "gallery">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h3>Family Support</h3>
<p>Hope's Seed is here to support you.</p>
</div>
<div class="col-sm-4">
<h3>Volunteer Opportunities</h3>
<p>Hope's Seed has many ways to volunteer.</p>
</div>
<div class="col-sm-4">
<h3>Giving Opportunities</h3>
<p>Enriching the lives of Texas children who are medically fragile and terminally ill.</p>
</div>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
希望这有帮助
在css中为margin:0设置body。某些浏览器具有默认边距
body
{
margin:0;
}