Bootstrap 4居中导航栏元素，不以移动折叠为中心
Bootstrap是一个流行的前端开发框架，它提供了丰富的CSS和JavaScript组件，可以帮助开发者快速构建响应式网站和应用程序。
在Bootstrap 4中，要实现居中导航栏元素，可以使用以下步骤：
- 创建一个导航栏容器：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- 导航栏内容 -->
</nav>- 在导航栏容器中添加一个导航栏头部：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<!-- 导航栏内容 -->
</nav>- 在导航栏头部后面添加一个按钮，用于移动折叠导航栏：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</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>
<!-- 导航栏内容 -->
</nav>- 在导航栏容器中添加一个导航栏内容的容器，并使用Bootstrap的flex布局类将其水平居中：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</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 justify-content-center" id="navbarNav">
<!-- 导航栏内容 -->
</div>
</nav>通过以上步骤，我们可以实现一个居中导航栏元素的效果。在这个导航栏中，Logo位于左侧，导航栏内容水平居中，且在移动设备上可以折叠显示。
推荐的腾讯云相关产品：腾讯云Web+，它是一款支持一键部署、自动扩缩容、全球加速的云托管产品，可以帮助开发者快速部署和管理网站和应用程序。详情请参考：腾讯云Web+
请注意，以上答案仅供参考，具体实现方式可能因具体情况而异。
相关·内容
我在一个网站上工作，我在设置导航栏时遇到了麻烦。我希望所有导航链接在导航栏展开时居中，而不是在导航栏处于折叠状态时居中。当它处于折叠状态时，我希望它们垂直堆叠并对齐到页面的左侧。我可以成功地让链接在折叠时居中或左对齐，但不能两者兼而有之。 这是我的带有导航栏代码的HTML。在带有类abs-center-x的navbar ul元素中，这是我之前尝试过的方法，如果有帮
浏览 29提问于2019-05-21得票数 1
回答已采纳
4回答
我试图把一个navigationBar的所有元素放在垂直中心，但是我不知道怎么做？黄色上方的灰色部分是navigationBar。正如我们所看到的，navigationBar的标题和其他元素不是垂直中心的。
我怎么能这么做？
浏览 4提问于2016-03-28得票数 2
回答已采纳
3回答
class="brand-logo center">Logo</a>我的代码中只有中心的标志。然而，当我在移动设备上看到这段代码时，导航条的高度变得非常小。请注意，我不关心将navbar元素折叠为sidenav。现在，导航条本身在移动设备上看起来非常小(高度)，这让我觉得某个地方缺少响应性的东西。
作为我问题的一个例子，我附加了这个。尝试以不同的分辨率呈现它，通过水平调整大小，<
浏览 8提问于2017-12-01得票数 1
回答已采纳
我在Twitter Bootstrap中查看了导航栏元素，看看它们是如何将导航栏中的元素垂直居中的，因为这是我一直在努力解决的问题。令人惊讶的是，我没有发现任何实际垂直居中元素的东西-没有line-height技巧或任何东西，真的，没有display: table-cell。.navbar-brand类有一个line-height为20px (类似于.navbar-nav中的链接)和一个padding为15px，但是
浏览 1提问于2013-11-11得票数 1
我尝试将一个元素在页面上垂直居中。这很好用。但是如果我添加一个导航栏，元素会垂直居中，但与导航栏的高度有一定的偏移。如何将内容容器垂直居中，包括导航栏高度？ body,html {} <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6
浏览 43提问于2021-10-12得票数 1
回答已采纳
我对web开发很陌生，我正在尝试创建一个带有Bootstra5.1.3的导航栏。我正试图完美地把“邮局”作为中心，但正如你所看到的，它似乎正在向右推进。我试过做些像mx汽车这样的事，但没什么用。X-UA-Compatible" content="ie=edge"> <link href="https://cdn.jsdelivr.net/npm/<
浏览 6提问于2022-04-03得票数 -2
1回答
导航栏中心问题
、、
我一直在努力让我的导航栏居中使用Bootstrap 3，我设法让导航栏居中使用navbar-center类，这是完美的工作，但当我在平板电脑上查看它时，最后一个导航项目落在DIV下，似乎是50%的左撇子造成了问题</ul> </div> </d
浏览 1提问于2018-08-13得票数 0
2回答
我有一个导航栏，我想添加一些文本，但文本总是在导航栏区域结束。我确保所有的div标签和ul标签都关闭了，但还是没有运气。 <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/bootstrap.css/3.0
浏览 2提问于2014-10-07得票数 0
回答已采纳
1回答
我想在我共享的这个基本引导导航栏中“在所有页面宽度上”对li项进行居中。
我试过父母的“正当性-内容中心”。它居中导航栏项目，但不是在所有的页面宽度。物品应该在左边一点。<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" r
浏览 2提问于2022-03-05得票数 0
回答已采纳
如何在引导4中在屏幕中间(水平和垂直地在页脚和导航之间)对搜索栏进行居中，并使其响应移动设备。
<link rel="stylesheet" href="Navigat
浏览 0提问于2018-03-20得票数 1
回答已采纳
我有一个页面，它有一个中心div，它是所有内容的保持者(我需要这个以便页面居中，并且有一个持久的顶部和底部导航)，然而，我现在不能做的是，当我在移动浏览器中向下滚动时(如果页面本身正在滚动)，我不能让它滑动地址栏因为滚动的是div的内容，所以浏览器的地址栏仍然存在。
我很好奇，当这个div从顶部坐标向下滚动时，是否可以发出一个手动命令来执行浏览器元素的隐藏/显示。我只关心如何在webkit、safari、firefox和chrome等现代移动
浏览 2提问于2015-01-19得票数 0
1回答
我的网站上的导航栏在火狐和IE8标准模式下不能正确居中。它可以在IE7兼容模式和Chrome中正确居中。
奇怪的是，将div (id=“navlink”)上的页边距设置为4px或更大将使其正确居中。任何较小的值都会导致它稍微偏离中心。我在Firebug中来回更改了值，这让我很困惑。对为什么会发生这种情况有什么解释吗？
浏览 4提问于2010-06-12得票数 3
回答已采纳
我有一个问题，当在移动设备上查看时，无法使引导封闭的站点地图菜单的显示/位置居中。这就是问题开始的地方。我试过使用·向右拉·对齐-内容·文本中心·bootst
浏览 3提问于2017-09-04得票数 0
“大约一年前，”安德烈斯·伊里奇(Andres)给出了一个优美优雅的答案，把导航栏的中心放在Bootstrap上。导航栏的中心位置很美。下坠效果很好。但是，当您进入平板电脑和移动视图时，移动菜单也会居中。简单地将文本与左边对齐并不能解决问题，因为每个无序列表项都需要自己的行。参考这个jsFiddle，看看我说的是什么：
我的问题：是否有一种简单的方法(<50行代码)来撤消媒体查询中的上述代码，从而使导航
浏览 0提问于2013-02-13得票数 0
回答已采纳
3回答
我正在学习使用Bootstrap和使用组件，特别是导航栏。 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css
浏览 0提问于2017-03-10得票数 8
回答已采纳
我刚接触bootstrap框架。在导航栏中，我插入了一个高度为50px的徽标。这显然会使导航栏变得更高。我没有为此调整任何CSS，它只是标志，这是迫使增加的高度。问题：目标：
我的假设是使用行高值或填充。然而，这带来了在移动浏览器上
浏览 52提问于2013-11-08得票数 54
回答已采纳
我正在学习bootstrap 4导航栏，但我不能清楚地理解如何在导航栏中定位对象，我希望在导航栏的中心放置一个搜索框，并在右侧放置一个按钮，但我只能做到这一点，导航栏没有居中对齐。<div class="collapse navbar-collapse text-xs-center" id="mynavbar">
浏览 0提问于2017-04-02得票数 1
回答已采纳
3回答
我正在尝试找出如何将我的链接对齐，使其位于导航栏的中心，而不是它们现在位于顶部的方式。我已经附加了我到目前为止所做的事情，但我无法弄清楚如何将链接对齐到中间。我附上了我在下面所做的事情。color: #939393; padding: 35px; letter-spacing: 4px{ overflow: hidden; font-si
浏览 24提问于2019-04-09得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
