Bootstrap 4:导航栏品牌左侧，链接居中，其他链接右侧
Bootstrap 4是一种流行的前端开发框架，它提供了丰富的组件和样式，可以快速构建响应式网页。在Bootstrap 4中，导航栏的布局可以通过使用内置的CSS类来实现。
要实现导航栏品牌左侧，链接居中，其他链接右侧的布局，可以按照以下步骤进行：
- 创建导航栏的HTML结构，包括一个品牌标志和链接列表。示例代码如下：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">品牌</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">链接1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接3</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">其他链接1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">其他链接2</a>
</li>
</ul>
</div>
</nav>- 在导航栏的外层添加
navbar类，以及适当的背景颜色类（例如navbar-light bg-light）来设置导航栏的样式。 - 在导航栏中，使用
navbar-brand类创建品牌标志，并设置href属性为品牌链接的目标地址。 - 将链接列表包裹在一个
navbar-nav类的ul元素中，并使用nav-item类为每个链接项创建容器。 - 使用
nav-link类为每个链接项创建链接样式，并设置href属性为对应链接的目标地址。 - 对于要居中显示的链接列表，使用
mx-auto类来实现水平居中布局。 - 对于要靠右显示的链接列表，使用
ml-auto类来实现靠右布局。
通过以上步骤，可以实现Bootstrap 4导航栏品牌左侧，链接居中，其他链接右侧的布局。
关于Bootstrap 4的更多信息和使用方法，您可以参考腾讯云的相关产品和文档：
相关·内容
问题的JSFiddle：HTML： <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap---<em
浏览 17提问于2019-08-16得票数 0
在bootstrap 3中是否可以将品牌名称居中显示在菜单项的中间？例如，有四个菜单项，我希望两个菜单项在左侧，两个在右侧，品牌名称在这两个菜单链接的中间。提前寻求帮助。
浏览 0提问于2014-01-11得票数 0
我使用Bootstrap的.navbar-header类作为导航栏已经有很长一段时间了，但从来没有费心去想为什么。我在网上搜索了我们为什么使用它，但没有找到任何解释。谁能解释一下它的目的是什么？
浏览 0提问于2016-01-09得票数 27
回答已采纳
6回答
我使用了Twitter bootstrap，并尝试将导航栏的文本与右侧对齐，即“品牌”将显示在右侧，其他所有内容将显示在左侧。(适用于从右到左的网站)。
有什么想法可以做到这一点吗？
浏览 0提问于2012-12-24得票数 19
回答已采纳
我一直在努力在导航栏上方居中放置两个图像，文本和标志。下面是一些照片和当前代码。**免责声明:图片中的文字不居中。然后我尝试将它们放在中心位置，我尝试了各种不同的方法，但似乎都不起作用，我猜这与Bootstrap的CSS有关。不同的人似乎将他们的品牌居中，但下拉菜单项在品牌的左侧或右侧，而不是下方。我还想在手机上隐藏“文本”，这样徽标就在“汉堡”图标的左侧居中。我熟悉@media，
浏览 1提问于2015-06-22得票数 0
我刚接触Bootstrap，所以在使用响应式导航栏时遇到了困难。这就是我想看到的:品牌-搜索栏-消息/通知-空格-右侧的链接在以前的链接中，搜索栏应该在消息/通知之前，但无论我尝试做什么，搜索栏都不会折叠。
有人能帮我一下吗？
浏览 0提问于2015-02-03得票数 2
2回答
围绕中心品牌的导航栏链接
、、、
我有一个引导导航栏在我的网站上，有链接和“品牌”。使用此修改，品牌在导航栏中居中。{(....bunch)(空空间的品牌...)(品牌)(空空间的....bunch...)(链接)}{ (....bunch of empty space....)(链接</em
浏览 1提问于2014-12-08得票数 0
我正在尝试使用bootstrap来创建导航栏。导航栏的左侧是功能菜单。右侧是导航按钮，带有指向控制面板或注销页面等的链接。当我减小浏览器的大小时，它应该如下图所示。
也就是说，左边的导航栏和右边的导航栏
浏览 1提问于2016-03-12得票数 0
我基本上是在尝试复制带有个人资料链接的推特个人资料导航栏：["Posts", "Posts & replies", "Media", "Likes"]。file=/src/App.js 我的限制： 1.)在视口宽度大小更改期间，导航栏链接文本必须始终在左右两侧保持相等的距离。2.)导航栏必须在其容器中居中，其链接</em
浏览 16提问于2021-06-14得票数 0
回答已采纳
2回答
在我的bootstrap 3导航栏中，使用"pull- right“bootstrap类将左侧的品牌以外的元素浮动到右侧。在移动版本中，当它们被按下切换按钮时，它们仍然漂浮在右侧，看起来非常丑陋。我如何更改它，使它们在移动视图中浮动在左侧或居中？
浏览 2提问于2014-02-28得票数 0
2回答
我的代码在移动视图上运行良好，但在桌面右侧链接正在从导航栏中消失。我试图创建以品牌为中心的导航栏，左侧搜索栏和右边链接。以及如何在左边移动hambuger酒吧，在移动视图上搜索右侧。ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
浏览 4提问于2017-05-03得票数 0
回答已采纳
2回答
我使用blogger创建了我的第一个导航栏，但我无法删除blogger设置的默认空白(左侧和右侧)。这是我的博客链接。我也使用了浏览器检查工具，但我找不到是什么导致了这个问题。这是我的博客链接：https://nainghtooaung2.blogspot.com/ 我确实使用了position:relative；为了调整alignment.Although，代码将导航栏移动到左侧，没有任何空白，这将在<
浏览 59提问于2019-05-19得票数 0
回答已采纳
页面布局: 960px宽，居中。然而，导航栏是100%宽的，导航栏中的链接以960px居中。导航栏的背景为#333333。我希望单词之间的间距为20px。当我将鼠标放在链接上时，我希望背景颜色突出显示左侧的10px和右侧的10px的文本，这样看起来就很漂亮。每当我将鼠标悬停在上面时，它都会增加额外的间距。
浏览 4提问于2014-05-22得票数 0
2回答
我开始使用bootstrap开发一个应用程序，做了一些关于如何让静态的左侧导航栏和右侧的动态内容区域，但无法获得线索的研究。有人能建议如何在每次点击链接时只改变内容区域(单独的html页面)，并有一个静态导航栏和标题。类似于HTML中提供的frameset标签。基本上，我不希望将导航条代码添加到应用程序中的所有html页面。
谢谢
浏览 2提问于2018-03-27得票数 6
我正在使用Bootstrap 3。我想要一个只有品牌的导航栏。没有其他链接或其他任何东西。我希望这个品牌处于中心位置。我如何才能做到这一点呢？
浏览 65提问于2013-11-17得票数 23
回答已采纳
2回答
我已经创建了一个带有Bootstrap 4 alpha 6的导航栏，它的左侧有一个大的品牌/图标，2个导航栏-nav的图标右侧有链接。一个导航器有链接，另一个导航器有图标。我希望2个导航栏出现在图标右侧的2个单独的行中。icon icon icon
--------------------------
浏览 1提问于2017-03-07得票数 40
回答已采纳
我正在尝试使用react项目中的materialize框架创建一个导航栏，并希望第一组链接位于导航栏的中心，第二组链接位于导航栏的右侧。我不确定该怎么做--助手类" left“和"right”都在工作，但是当我试图“居中”我的链接时，它默认在导航栏的左侧。这是我正在使用的代码...
浏览 38提问于2020-04-28得票数 0
回答已采纳
制作了一个具有Astra主题的wordpress网站，我想从标题导航中删除一个链接，因为我只想让我的徽标成为主页的链接。我还没有找到任何可行的解决方案。
浏览 40提问于2019-05-31得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
