如何删除jumbotron额外的空间？

Question

我很擅长编写和构建一个简单的个人网站作为免费代码阵营的项目。我似乎无法摆脱jumbotron在我目录右侧创建的额外空白区域。我在填充中尝试了负值，但它不起作用。任何人都可以帮忙吗？

代码：

body {
  padding-top: 30px;
  background-image: url("http://www.iamag.co/features/itsart/wp-
  content/uploads/2014/07/imperial-boy-16.jpg");
}
.jumbotron {
  padding: 20px 20px 20px 20px;
}
#toc {
  list-style: none;
  margin-bottom: 30px;
}
#toc li {
  background: url(dot.gif) repeat-x bottom left;
  overflow: hidden;
  padding-bottom: 2px;
}
#toc a {
  float: left;
  display: inline-block;
  position: relative;
  bottom: -4px;
}

<div class="jumbotron"><h2><u>Table of Contents</u></h2>
  <ul id="toc">
    <li><a href="#projects">Projects</a></li>
    <li><a href="#links">Social Media Links</a></li>
    <li><a href="#">Chapter 3</a></li>
    <li><a href="#">Chapter 4</a></li>
    <li><a href="#">Chapter 5</a></li>
  </ul>
</div>

Answer 1

听起来您遇到的问题似乎来自8px margin默认添加到body。只需手动覆盖它就可以解决您的问题：

body {
  margin: 0;
}

这可以在这里看到：

body {
  padding-top: 30px;
  background-image: url("http://www.iamag.co/features/itsart/wp-content/uploads/2014/07/imperial-boy-16.jpg");
  margin: 0;
}

.jumbotron {
  padding: 20px 20px 20px 20px;
}

#toc {
  list-style: none;
  margin-bottom: 30px;
}

#toc li {
  background: url(dot.gif) repeat-x bottom left;
  overflow: hidden;
  padding-bottom: 2px;
}

#toc a {
  float: left;
  display: inline-block;
  position: relative;
  bottom: -4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="jumbotron">
  <h2><u>Table of Contents</u></h2>
  <ul id="toc">
    <li><a href="#projects">Projects</a></li>
    <li><a href="#links">Social Media Links</a></li>
    <li><a href="#">Chapter 3</a></li>
    <li><a href="#">Chapter 4</a></li>
    <li><a href="#">Chapter 5</a></li>
  </ul>
</div>

希望这有帮助！ ：）

Answer 2

试试这个：

.jumbotron {
    padding: 20px 20px 20px 20px;
    display: inline-block;
}