jumbotron的引导导航栏底部向右偏移
Posted
技术标签:
【中文标题】jumbotron的引导导航栏底部向右偏移【英文标题】：Bootstrap nav bar bottom of jumbotron is off set to the right 【发布时间】：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" />
<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>【问题讨论】：
【参考方案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" />
<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 所以你是说你希望它是屏幕的整个宽度？没有白边？ 是的，我真的想通了，找到了我的问题的答案！我只需要将类定义为一行，问题就解决了以上是关于jumbotron的引导导航栏底部向右偏移的主要内容，如果未能解决你的问题，请参考以下文章
Jumbotron 中的按钮链接到 React 导航栏中的按钮
html Bootstrap-Powered HTML：基本的bootstrap布局示例，包含导航栏，jumbotron，容器，行，列