Question

以下是我正在创建的投资组合网站的HTML和CSS代码。我的问题是当我将我的徽标添加到导航栏（增加了导航栏的宽度）时，内容开始覆盖每个锚点内容的顶部。例如，当我单击“关于”锚点时，它将转到该区域，但该区域的顶部被导航栏增加的宽度覆盖。我按照Bootstraps文档中的说明以及stackoverflow上的其他说明，即在body元素的顶部添加paddding或margin但是它不起作用。有人可以查看我的代码并告诉我，如果我做错了吗？

它应该是什么样的：https://www.script-tutorials.com/demos/391/index.html#services

我的样子：https://bootstrap-parallax.herokuapp.com/#services

HTML：

        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand-centered" href="#">
                <img src="img/logo2.png" alt="" />
              </a>
            </div>

            <div class="collapse navbar-collapse" id="navbar-collapse-main">
              <ul class="nav navbar-nav navbar-left">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#information">Resume</a></li>
                <li><a href="#map">Contact</a></li>
                <li><a href="https://www.script-tutorials.com/bootstrap-one-page-template-with-parallax-effect/">Blog</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>

CSS：

/*this changed a heading text color to white*/
.h1, h1 {
  color: white;
}

/*this changed another heading text color to white*/
.h3, h3 {
  color: white;
}

/*this vertically centered the navbar links after the logo made navbar too wide*/
.navbar-nav li a {
  line-height: 35px;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: bold;
  font-size: medium;
}

/*this centers the logo on the navbar*/
@media screen and (min-width:768px){
    .navbar-brand-centered {
        position: absolute;
        left: 50%;
        display: block;
        width: 160px;
        text-align: center;
    }
    .navbar>.container .navbar-brand-centered, 
    .navbar>.container-fluid .navbar-brand-centered {
        margin-left: -160px;
    }
}

/*this pushed the left navbar links to the right */
.navbar-left {
  padding-left: 75px;
}

/*this pushed the right navbar links to the left*/
.navbar-right {
  padding-right: 75px;
}

/* general styles */
html, body {
  height: 100%;
  width: 100%;
}

/* padded section */
.pad-section {
  padding: 50px 0;
}
.pad-section img {
  width: 100%;
}

/* vertical-centered text */
.text-vcenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.text-vcenter h1 {
  font-size: 4.5em;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

/* additional sections */
#home {
  background: url(../img/Slide2.jpg) no-repeat center center fixed; 
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#about {
}

#services {
  background-color: #306d9f;
  color: #ffffff;
}
#services .glyphicon {
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  display: inline-block;
  font-size: 60px;
  height: 140px;
  line-height: 140px;
  text-align: center;
  vertical-align: middle;
  width: 140px;
}

#information {
  background: url(../img/Slide.jpg) no-repeat center center fixed; 
  display: table;
  height: 800px;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#information .panel {
  opacity: 0.85;
}

#map {
  /*width: 500px;*/
  height: 500px;
}

footer {
  padding: 20px 0;
}
footer .glyphicon {
  color: #333333;
  font-size: 60px;
}
footer .glyphicon:hover {
  color: #306d9f;
}

body {
  padding-top: 65px;
}

Answer 1

由于导航栏宽度现在增加了，我们必须增加div的填充以保持视图不变。

Bread

原始模板具有特定div填充的特定导航栏高度。由于您更改了导航栏，因此您还必须更改div填充

.pad-section { padding: 100px 0; }技巧。
虽然这不是最好的选择，但有时它会作为死胡同备份帮助< / em>的

而不是将br放在br部分之前。就这样说。

about

Answer 2

在bootstrap中，自定义是页面的容器，用于定义正确的填充，因此不会被导航栏遮蔽..并且您正在查看navabar ..看一下navbase下面的容器，这可能是这样的

.wrap＆gt; .container

.wrap > .container-fluid
{
   padding: 45px 15px 20px;
}

45px填充与导航栏的八个相关因此..根据您的需要进行调整

添加填充到正文顶部并不能解决导航栏覆盖内容的问题

2 个答案: