尝试了很多东西,但没有任何效果。希望你们能帮助我。 我的导航栏看起来像这样:
.navbar-nav{
float: left;
}
.navbar img{
width: 35px;
}
#navi{
position: fixed;
width: 100%;
z-index:1;
}
.navbar a{
font-size: 25px;
}
.navbar{
background-color: #000000;
}
.halter{
padding: 5px;
}
.navbar-toggler{
}
.navbar-brand{
margin-left: 12px;
font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
}
<nav class="navbar navbar-expand-lg navbar navbar-light" style="background-color: #FFFFFF">
<img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1">
<a data-scrol class="navbar-brand" href="#text1">
<span class="prwaldbrand">Projekt <span class="secondword">Waldbrand</span></span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Film</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Info</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Über uns</a> </li>
</ul>
</div>
</nav>
我希望我的 ul 中的 li 元素以响应方式居中放置在导航栏的中间。想不出解决方案。
提前致谢。
最佳答案
您需要添加此 css:
#navbarNav{justify-content:center;}
您如何自己解决这个问题?
了解 bootstrap 为您提供了所有类和 css,但它被设计为在需要的地方被覆盖
在 Chrome 浏览器中:
一个。右键单击看起来不正确的区域。
从弹出的上下文菜单中选择 INSPECT
最大化 DevTools 面板。左边是构成页面的 HTML;右侧是当前在左侧突出显示的元素的 CSS。实验吧!
/*
You need this at FULL SCREEN to see the effect (top right link)
The fix is: .navbar-nav{justify-content:center;}
*/
.navbar-nav{}
.navbar img{width:35px;}
#navi{position:fixed;width:100%;z-index:1;}
.navbar a{font-size:25px;}
.navbar{background-color:#000000;}
.halter{padding:5px;}
.navbar-toggler{}
.navbar-brand{margin-left:12px;font-family:Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";}
/* ADD THIS */
#navbarNav{justify-content:center;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar navbar-light" style="background-color: #FFFFFF">
<img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1">
<a data-scrol class="navbar-brand" href="#text1">
<span class="prwaldbrand">Projekt <span class="secondword">Waldbrand</span></span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Film</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Info</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Über uns</a> </li>
</ul>
</div>
</nav>
关于html - 如何居中导航栏元素? (有反应地),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54852112/