我尝试将我的内容部分部分移到我的导航栏上。在我添加css代码之前。我的内容部分看起来很好。
在我的CSS中添加三行代码后，我的内容部分确实在导航栏上移动了一些，但我的内容部分的右边距已经消失。内容部分不再居中。请帮我解决这个问题。
这是我的原始代码：
.content-section {
/* 10 px on top with nav bar */
position: absolute;
margin-top: -30px;
z-index: 9999;
padding: 0 10px;
background: white;
border-color: black;
border-width: 5 px;
border-style: solid;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
background: lime !important;
}
.content-section {
/* 10 px on top with nav bar */
/*
position: absolute;
margin-top: -30px;
z-index: 9999;
*/
padding: 0 10px;
background: white;
border-color: black;
border-width: 5 px;
border-style: solid;
}
.import-notes {
background: yellow;
/* add code to make in full width */
margin-left: -10px;
margin-right: -10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">XYZ123</a>
</div>
</nav>
<div class="container">
<div class="content-section">
<p>(1)This is a test this is a test. This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This
is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is
a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test
this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.</p>
<p>(2)This is a test </p>
<p>(3)This is a test </p>
<p>(4)This is a test </p>
<p>(5)This is a test </p>
<p>(6)This is a test </p>
<p>(7)This is a test </p>
<p>(8)This is a test </p>
<p class="import-notes">This is full width no padding</p>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
将position: absolute类
position: relative更改为.content-section
.content-section {
/* 10 px on top with nav bar */
position: relative;
margin-top: -30px;
z-index: 9999;
padding: 0 10px;
background: white;
border-color: black;
border-width: 5 px;
border-style: solid;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
background: lime !important;
}
.content-section {
/* 10 px on top with nav bar */
/*
position: absolute;
margin-top: -30px;
z-index: 9999;
*/
padding: 0 10px;
background: white;
border-color: black;
border-width: 5 px;
border-style: solid;
}
.import-notes {
background: yellow;
/* add code to make in full width */
margin-left: -10px;
margin-right: -10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">XYZ123</a>
</div>
</nav>
<div class="container">
<div class="content-section">
<p>(1)This is a test this is a test. This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This
is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is
a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test
this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.</p>
<p>(2)This is a test </p>
<p>(3)This is a test </p>
<p>(4)This is a test </p>
<p>(5)This is a test </p>
<p>(6)This is a test </p>
<p>(7)This is a test </p>
<p>(8)This is a test </p>
<p class="import-notes">This is full width no padding</p>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
由于您的问题含糊不清，我不能100％确定这是否是您想要的。使用此代码，向左跳转已得到修复，但仍有空间看到绿色背景。
.container {
padding-left:0;
padding-right:0;
margin-left:0 !important;
margin-right:0 !important;
}
.content-section {
/* 10 px on top with nav bar */
position: absolute;
margin-top: -30px;
z-index: 9999;
padding:0 10px;
background : white;
border: 5px solid black;
}
.import-notes {
background : yellow;
/* add code to make in full width */
margin-left: -10px;
margin-right: -10px;
}
body { background: lime !important; }<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">XYZ123</a>
</div>
</nav>
<div class="container">
<div class="content-section">
<p>(1)This is a test this is a test. This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.This is a test this is a test.</p>
<p>(2)This is a test </p>
<p>(3)This is a test </p>
<p>(4)This is a test </p>
<p>(5)This is a test </p>
<p>(6)This is a test </p>
<p>(7)This is a test </p>
<p>(8)This is a test </p>
<p class="import-notes">This is full width no padding</p>
</div>
</div>
</body>
</html>
首先，在.container部分，我使用了margin-left:0;和margin-right:0;。如果这不起作用，我会检查Elemented＆＃34;并发现Bootstrap中的特异性是保持属性不变的原因。 margin-left和right属性的原始值为auto。我添加了 !important 来覆盖此内容，但您应该知道这是不好的做法。