jumbotron的引导导航栏底部向右偏移答案

【问题标题】：Bootstrap nav bar bottom of jumbotron is off set to the rightjumbotron的引导导航栏底部向右偏移
【发布时间】：2022-01-21 17:57:24
【问题描述】：

我正在尝试将导航栏嵌套在底部的 jumbotron 中。由于某种原因，导航栏向右偏移，我不确定如何解决这个问题或为什么会发生这种情况？我有一种感觉，我只是做错了？我希望它的外观和行为非常像这个导航栏：https://michaelgrumley.com/。这是我第一次搞乱引导程序。我究竟做错了什么？谢谢。

.jumbotron {
   background-image: url("https://image.jpg");
   background-color: #B3B3B3;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   min-height: 550px !important;
   border-bottom: 8px solid #007595;
   
}

.logo {
 display: block;
 margin: auto;
 
}

header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   background: rgba(0,65,98,.67);
   position: absolute;
   bottom: 0;

}

.logonav {
   color: #fff;
   font-weight: bold;
   letter-spacing: 4px;
   margin-left: 25px;
   align-content: center;
}

a {
   text-decoration: none !important;
}

ul li a {
   color: #FFFFFF;
   text-decoration: none;
}

ul li:hover a {
   color: #80c0ff;
}

<body>
    
<div class="jumbotron">
    <img class="img-fluid logo" src="the logo" alt="logo"/>
<header>
    <a href="">
        <h4 class="logonav">Title</h4>
    </a>
<ul class="nav">
      <li> <a class="nav-link" href="#">Tab 1</a> </li>
      <li> <a class="nav-link" href="#">Tab 2</a> </li>
      <li> <a class="nav-link" href="#">Tab 3</a> </li>
    </ul>
</header>
</div>

</body>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

根据您的屏幕截图，这是您正在寻找的输出。请参阅我添加的 CSS，并将 justify-content: center; 添加到您的 .header

.jumbotron {
   background-image: url("https://image.jpg");
   background-color: #B3B3B3;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   min-height: 550px !important;
   border-bottom: 8px solid #007595;
   
}

.logo {
 display: block;
 margin: auto;
 
}

header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: rgba(0,65,98,.67);
    position: absolute;
    bottom: 0;
}

.logonav {
   color: #fff;
   font-weight: bold;
   letter-spacing: 4px;
   align-content: center;
   margin-right: 2rem;
}

a {
   text-decoration: none !important;
}

ul li a {
   color: #FFFFFF;
   text-decoration: none;
}

ul li:hover a {
   color: #80c0ff;
}

.nav li {
  display: flex;
  list-style-type: none;
}

.nav {
  display: flex;
  justify-content: center;
  gap: 60px;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

<body>
    
<div class="jumbotron">
    <img class="img-fluid logo" src="the logo" alt="logo"/>
<header>
<div class="wrapper">
<a href="">
        <h4 class="logonav">Title</h4>
    </a>

<ul class="nav">
      <li> <a class="nav-link" href="#">Tab 1</a> </li>
      <li> <a class="nav-link" href="#">Tab 2</a> </li>
      <li> <a class="nav-link" href="#">Tab 3</a> </li>
</ul>
</div>

</header>
</div>

</body>

【讨论】：

我想我不清楚我的问题，所以导航栏中的所有信息都在我想要的位置，但导航栏本身是偏移的。这是正在发生的事情的链接，您可以看到从页面边缘到导航栏开始并继续离开页面的空间，以便页面底部有一个滚动条......我该如何解决这个问题? stevesheppardbooks.com/Untitled-2.html
@Taryn 所以你是说你希望它是屏幕的整个宽度？没有白边？
是的，我真的想通了，找到了我的问题的答案！我只需要将类定义为一行，问题就解决了