Question

的index.html

<html>
<head>
<title>My Personal Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="webpage.css">
</head>
<body>
<div class="jumbotron">
</div>
</body>
</html>

webpage.css

.jumbotron{
  position:relative;
  background: #000 url(background.jpg) center center;
  width:100%;
  height:100%;
  background-size:cover;
  overflow:hidden;
}

当我使用以下代码时，顶部和底部有一些空白区域和＆＃34;＆gt;＆＃34;在白色空间的左上角。请告诉我如何解决问题。这是我第一次使用bootstrap。谢谢。

Answer 1

你在导航后有下边距

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px; <----Here
    border: 1px solid transparent;
}

jumbotron选择器的边距

.jumbotron {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 30px; <---Here
    color: inherit;
    background-color: #EEE;
}

导致问题，将保证金更改为0px;更好地使用自定义选择器并使用0px覆盖保证金;

如何使用boostrap覆盖1个图像的整个屏幕背景

1 个答案: