如何让页面顶部div在桌面与移动端均全屏显示？

问题原因 #

你使用的Bootstrap .jumbotron 类默认带有左右内边距（padding-left: 1rem; padding-right: 1rem;），同时浏览器默认给body元素设置了margin: 8px;，这两个因素共同导致顶部Bar在移动端无法撑满屏幕宽度。

解决方案 #

调整CSS，重置body的默认边距，并覆盖.jumbotron的内边距：

/* 重置浏览器默认的body外边距 */
body {
  margin: 0;
}

/* 针对top_bar调整样式，覆盖jumbotron的默认内边距 */
.jumbotron#top_bar {
  border-radius: 0 0 25px 25px;
  background-color: #696969;
  width: 100%;
  /* 移除左右内边距 */
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}

额外确认 #

确保你的viewport标签正确放在HTML头部，位置在其他meta标签之后、CSS引入之前：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Bootstrap CSS和自定义CSS -->
</head>

修改后，顶部Bar就能在桌面端和移动端都铺满屏幕宽度了。

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