更改导航栏以居中标题折叠的屏幕宽度
Posted
技术标签:
【中文标题】更改导航栏以居中标题折叠的屏幕宽度【英文标题】：Changing the screen width a nav bar collapses at with a centered heading 【发布时间】：2021-10-28 17:01:08 【问题描述】：我在导航中有一个居中的标题，这会导致导航中的链接在导航栏折叠之前换行 -
我想做的只是让链接比现在更早崩溃。我已经查看了这个问题的所有答案，但无法找到适合我想要完成的工作的答案。下面是我的最后一个测试。我想如果我使用媒体查询更改自定义标题的宽度会有所帮助，但它没有。截至目前，当链接折叠时，汉堡图标也浮动到居中文本的左侧。以后我会担心的。
<nav class ="navbar navbar-expand-xl navbar-light bground">
<a class ="navbar-brand" href ="#"> NavBar Testing </a>
<button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#colNav">
<span class ="navbar-toggler-icon"></span>
</button>
<div class="customHead">
<text>Centered horizontally and vertically</text>
</div>
<div class ="collapse navbar-collapse" id ="colNav">
<ul class ="navbar-nav ml-auto">
<li class ="nav-item">
<a class ="nav-link" href="#"> Services </a>
</li>
<li class ="nav-item">
<a class ="nav-link" href ="#"> About Us</a>
</li>
<li class ="nav-item">
<a class ="nav-link" href ="#"> Contact Us </a>
</li>
</ul>
</div>
</nav>
.navbar-collapse
background-color: red;
float: right;
width: 25%;
.navbar-nav, .nav-link
background-color: yellow;
color: red !important;
.customHead
width: 100%;
position: relative;
background: red;
text
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -130%);
background: orange;
margin-top: 10px;
@media only screen and (max-width: 1200px)
.customHead
width: 80%;
.navbar-toggler
background-color: red;
float: right;
【问题讨论】：
【参考方案1】：除了此处显示的内容之外，还有其他 CSS，因此很难确切知道。但一种解决方法可能是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.flex
flex: 1;
display: flex;
.horizontal-center
justify-content: center;
.horizontal-end
justify-content: flex-end;
.vertical-center
align-items: center;
.navbar-nav
display: flex;
.nav-link
background-color: yellow;
color: red !important;
margin-left: 10px;
li
list-style: none;
</style>
</head>
<body>
<nav class="flex">
<div class="flex vertical-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#colNav">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"> NavBar Testing </a>
</div>
<div class="flex vertical-center horizontal-center">
<text>Centered horizontally and vertically</text>
</div>
<div class="flex horizontal-end vertical-center">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"> Services </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Contact Us </a>
</li>
</ul>
</div>
</nav>
</body>
</html>【讨论】：
对不起，我应该包含我的整个 html。认为如果我保持我的 sn-ps 小，故障排除会更容易。我会试试你的建议。谢谢！ 用于保持导航栏正确对齐。谢谢！仍然需要努力折叠链接，但这对我来说是一个好的开始。以上是关于更改导航栏以居中标题折叠的屏幕宽度的主要内容，如果未能解决你的问题，请参考以下文章