0
我对bootstrap相当陌生，我试图找出一些测试网站的代码。我遇到了bootstrap问题，我设置了一个元素并将2个元素放入其中。左边是一段（我打算稍后改为更大的元素），右边是一个图像（我认为尺寸不重要）。我注意到row元素并没有占据整个屏幕的宽度，并且认为这是因为它的内部元素。我进入我的CSS文件进行故障排除，将行类的宽度设置为100％，然后返回我的网站并打开Chrome的开发工具。我注意到容器div在两侧都有一个左右边缘，这使得行div占用更少的空间并将其本身集中在容器的元素中。我将左右边距值设置为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>
请提供[MCVE。 –
_Columns通过填充创建装订线（列内容之间的间隙）。该填充在第一行和最后一列的行中通过.rows._上的负边距偏移。最佳做法是通过文档：请参阅[Grid]（https://getbootstrap.com/css/#grid），具体为**介绍**关于'容器'/'容器流体'和'行'。你也可以查看CSS [here]（https://github.com/twbs/bootstrap/blob/v3.3.7/dist/css/bootstrap.css）。 – vanburen
@vanburen谢谢！我阅读了文档（特别是容器和容器流体之间的区别）。我将容器切换到容器流体，它完美地工作！ :) –