如何消除Bootstrap中jumbotron、navbar与footer间的留白？

嗨，作为网页设计新手碰到这种布局小问题太正常了，我来帮你搞定这些讨厌的留白～

首先咱们得搞清楚这些留白从哪来：你已经给jumbotron加了margin-bottom: 0px，但Bootstrap的navbar默认自带上下外边距，而且浏览器给body也加了默认的外边距，这俩就是留白的元凶。

直接上解决方案，修改你的CSS代码就行：

1. 清除body的默认外边距
   浏览器默认会给body加一点外边距，先把它去掉：

   body {
     margin: 0;
   }
   

2. 移除navbar的上下外边距
   Bootstrap的navbar默认有margin-top和margin-bottom，咱们把这俩都设为0，还可以顺便去掉圆角让它和上下元素完全贴合：

   .navbar {
     margin-top: 0;
     margin-bottom: 0;
     border-radius: 0; /* 可选，保留圆角的话可以删掉这行 */
   }
   

3. 确认footer的样式
   你已经给footer加了margin: 0px，这部分没问题，不过可以确保它占满全屏（container-fluid已经帮你做了，但加上更稳妥）：

   .footer{ 
     margin: 0; 
     background-color: grey; 
     bottom: 0; 
     padding: 20px; 
     width: 100%;
   }
   

把这些整合到一起，你的完整CSS就变成这样了：

body {
  margin: 0;
}

.jumbotron{ 
  height: 350px; 
  width: 100%; 
  background-size: 100% 100%; 
  background-image:url(mj.jpg); 
  margin-bottom: 0; 
} 

.navbar {
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
}

.footer{ 
  margin: 0; 
  background-color: grey; 
  bottom: 0; 
  padding: 20px; 
  width: 100%;
} 

.text-center{ 
  font-size: 20px; 
  font-style: italic; 
  font-family: "Gill Sans", sans-serif; 
}

这样修改之后，jumbotron和navbar之间、navbar和footer之间的留白就完全消失啦，三个元素会紧密贴合在一起～

内容的提问来源于stack exchange，提问作者user9835275