我不是前端开发人员,所以我怀疑我可能会错过一些非常基本的东西。不过,我无法找出解决方案。 我有一个div
元素,我只是想在顶部应用一些padding
,这样它就不会干扰标题。我环顾四周,看到类似的边缘崩溃问题,但我不认为是这种情况,因为我在这里处理两个不相互包围的div
(tot-header
和content
)。这就是我迄今为止所写的内容。填充不适用div
<!DOCTYPE html>
<html>
<head>
<title>Blogologo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="css/head.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="tot-header">
<div class="page-header">
<h1>Blogologo</h1>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Racconti</a></li>
<li><a href="#">Rubriche</a></li>
<li><a href="#">Pesce fritto e baccalà</a></li>
</ul>
</div>
</nav>
</div>
<div class="content">
<div class="container">
<div class="row">
<div id="central" class="col-md-8">
Preview
</div>
<div id="side" class="col-md-4">
<ul class="side-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Racconti</a></li>
<li><a href="#">Rubriche</a></li>
<li><a href="#">Pesce fritto e baccalà</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
和CSS
.tot-header {
position: fixed;
top: 0px;
width: 100%;
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.content {
padding-top: 10cm;
}
但是填充似乎不起作用。有任何想法吗?