Angular5和Bootstrap4 -无法将最后一个菜单项与右侧对齐
Angular5和Bootstrap4是两个常用的前端开发框架。Angular5是一种基于TypeScript的开发框架，用于构建单页应用程序。Bootstrap4是一个流行的HTML、CSS和JavaScript框架，用于快速构建响应式网站和Web应用程序。
在Angular5中，可以使用Bootstrap4来实现页面布局和样式。要将最后一个菜单项与右侧对齐，可以使用Bootstrap4提供的flexbox布局类。
首先，确保在Angular5项目中引入了Bootstrap4的CSS文件。可以通过在index.html文件中添加以下代码来引入：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">然后，在HTML模板中，使用Bootstrap4的flexbox布局类来对菜单项进行布局。可以使用justify-content-end类将菜单项向右对齐。例如：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-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>
<li class="nav-item ml-auto">
<a class="nav-link" href="#">最后一个菜单项</a>
</li>
</ul>
</div>
</nav>在上面的代码中，ml-auto类将最后一个菜单项向右对齐。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
相关·内容
2回答
引导4 col与ml-auto对齐
twitter-bootstrap、bootstrap-4
我想将导航对齐到右边，但是使用.ml-auto和.d-flex是行不通的，我也不明白为什么。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<
浏览 1提问于2019-04-15得票数 1
回答已采纳
1回答
使用Bootstrap 4在移动设备上内联定位导航栏图标？
html、css、twitter-bootstrap
我正在尝试在Bootstrap 4中配置一个导航栏，以显示仅在移动设备上显示的汉堡菜单的其他图标。 我不能让图标以内联方式显示，也不能找出哪里出了问题。 我将navbar-nav类添加到列表中，将d-lg- on类添加到较大的设备上。bootstrap中有没有内置的类可以修复这些对齐？我甚至找不出哪里出错了。 ? HTML： <nav class="navbar navbar-expand-lg">
<div class="container">
<a
浏览 15提问于2019-05-29得票数 2
回答已采纳
1回答
不能使用引导4作为框架使div内容对齐
html、css、flexbox、bootstrap-4
专家们，
我正在尝试升级到引导4，而且我在使用flex容器时遇到了困难。
由于某些原因，我的导航栏菜单链接--无论是子菜单还是主菜单--都不对齐。但是，当我完全删除子菜单ul内容时，主菜单将正确地对齐到右边。
我在这里错过了什么？
提前谢谢。
<nav class="header navbar navbar-expand-md navbar-light fixed-top bg-light">
<div class="container">
<div class="navbar-brand">
浏览 1提问于2018-04-22得票数 0
回答已采纳
3回答
CSS float-right在Bootstrap 4导航栏中不起作用
html、css、twitter-bootstrap、bootstrap-4、navbar
我试图让我的导航链接浮动到导航栏的右边，但是我不能让它工作。我尝试在CSS文件中使用".float- right“、"float-xs-right”和“justify content-end”bootstrap4类，同时使用"float: right !important;“，但仍然不起作用。
这是我网站导航栏的HTML：
<div id="navbar" class="navbar navbar-fixed-top">
<div class="container">
<
浏览 0提问于2017-08-04得票数 11
回答已采纳
1回答
如何在bootstrap固定导航栏中移动项目
html、css、twitter-bootstrap
我正在尝试使用Bootstrap 4创建一个固定顶部的导航栏，但是我很难将徽标和菜单项与我的喜好对齐。
我知道有ml-auto，mr-auto，但是，我可以给它添加像素，这样我就可以按我想要的方式移动它吗？
这是我的导航栏的样子：
我希望将徽标和菜单项移动到屏幕的中间。也许可以从从左到右填充100px开始，这样徽标和菜单就更接近了。下面是我的代码：
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-bra
浏览 24提问于2019-03-26得票数 1
回答已采纳
2回答
bootstrap4导航栏-展开-在angular5项目中不起作用
html、css、angular、twitter-bootstrap、bootstrap-4
我在一个Angular5项目中用Bootstrap4做了一个非常简单的导航栏，导航栏看起来像这样：
<nav class="navbar navbar-expand-sm bg-success ">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a&
浏览 0提问于2018-01-12得票数 0
1回答
如何在bootstrap 4中将移动视图导航栏的菜单内容显示到中心位置
html、css、bootstrap-4
我得到左对齐的文本时，在移动view.This是在bootstrap4中完成。如何在折叠时将菜单内容居中 ? <ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link color-me" href="#home">Home</a>
</li>
&
浏览 18提问于2020-06-25得票数 0
2回答
使用bootstrap将导航栏向右对齐
css、twitter-bootstrap、bootstrap-4、frontend、navbar
我正在尝试将导航栏组件向右对齐。代码如下所示。我尝试使用ml-auto，但它没有给出预期的结果。我得到的结果附在下面。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymou
浏览 4提问于2021-11-29得票数 0
2回答
每个引导导航栏链接是否可以单独隔开
css、twitter-bootstrap、flexbox、grid、alignment
例如，我有一个导航栏，其中包含以下链接：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Reg
浏览 0提问于2018-07-12得票数 2
3回答
我的导航栏垂直堆叠在手机上。我想让它在一条线上是水平的。
html、css
单击下面的链接，您将看到导航栏在移动设备中垂直堆叠在另一个之上。我希望它在同一个移动设备的一行中。 http://www.responsinator.com/?url=localhost%2FAssignment%2520App%2Fbasic.html%23 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
<div clas
浏览 39提问于2019-07-02得票数 0
回答已采纳
6回答
如何在导航位于右侧时使徽标出现在左侧
html、css
我是HTML的新手，所以我尝试过使用CSS (向右浮动)和类导航栏-向右，但都没有用，导航按钮总是停留在左边。我尝试在网上查找，每个人都说使用float，但由于某些原因，它不起作用。 CSS/HTML代码： .logo {
margin-left: 75px;
width: 250px;
height: 80px;
object-fit: contain;
}
.navigation a:hover {
background-color: #ddd;
color: black;
}
.navigation a.active {
background-col
浏览 58提问于2020-10-05得票数 1
2回答
如何使用Bootstrap将导航栏的元素向右对齐？
html、css、bootstrap-4
我想要显示右侧对齐的导航栏项目，但这种方式对我不起作用。我将ml-auto放到了list类中，但它仍然向我显示了左对齐的项。我怎样才能让它向我显示右对齐的导航栏项目？ HTML： <div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
<div class="container-fluid">
<div class="collapse navbar-c
浏览 78提问于2021-09-28得票数 0
回答已采纳
1回答
引导浮动-右不向右移动元素
bootstrap-4、css-float
我在努力学习引导。导航栏具有浏览器的整个宽度。表格在肚脐里。为什么不向右移动搜索框？
我注意到如果我用ml-auto替换浮点数，它会工作，但我想知道为什么float类不能工作。
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
浏览 2提问于2020-12-17得票数 1
回答已采纳
1回答
自举正当性-对
twitter-bootstrap、bootstrap-4
日安，
我有个问题。我在一个网站上工作，我希望菜单是对齐的。
理论上应该是：
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link
浏览 1提问于2018-12-03得票数 1
回答已采纳
1回答
Navbar中图像的垂直对齐
html、css、bootstrap-4、twitter-bootstrap-4
我有一个网站，我正在开发利用引导4框架。我正在尝试创建一个以navbar为中心的navbar-brand。我能够将navbar-brand放在中间，navbar-brand的每一侧都有一个navbar-nav。请在下面找到我使用的代码。我的问题是navbar-brand是垂直对齐在navbar的中心。
如何使navbar-brand与navbar底部对齐，并且在不调整页边距的情况下使多余的凸起在navbar的顶部？
#hdrContainer {
background-color: #0a3782;
}
.container {
background-color: inherit
浏览 3提问于2017-11-27得票数 0
回答已采纳
2回答
我可以让引导4肚脐切换到一个列而不是崩溃？
html、css、web、frontend
我希望我的所有菜单项在任何时候都是可见的，当屏幕大小太小时，只需从居中的行格式切换到居中的列。
<div style="position: sticky; top: 0px;">
<!--<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar9">
<span class="navbar-toggler-icon"&
浏览 6提问于2017-11-01得票数 0
回答已采纳
1回答
是否有可能使两个肚脐与一个标志和对齐两条左和右两条？
bootstrap-4、navbar
这是我想要的东西在我的靴子4的肚脐..。
我从一个肚脐开始，但我决定使用两个肚脐，并尝试使用样本从以前的答案。
这是我目前的密码。
<nav class="navbar navbar-expand-md navbar-light bg-primary">
<a class="navbar-brand" href="index.php"><img src="/zc157/images/logos/logo.svg" alt="Homepro Logo" style="wi
浏览 3提问于2019-06-19得票数 0
回答已采纳
1回答
引导4导航条垂直对齐问题
css、bootstrap-4、navbar
下面是我肚脐的代码：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">BRAND</a>
<div class="navbar-collapse">
<ul class="navbar-nav mr-auto">
{% if user.is_authent
浏览 4提问于2022-10-07得票数 0
回答已采纳
1回答
我的bootstrap下拉菜单不工作
jquery、html、css、bootstrap-4
我刚刚从w3schools.com复制了bootstrap 4下拉列表代码。但是下拉列表在我的visual studio代码中不起作用。不过，这些代码在在线编辑器中可以正常工作。因为我是初学者，如果我错过了什么，请告诉我。以下是我的代码：
`<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewp
浏览 20提问于2017-12-23得票数 1
回答已采纳
1回答
引导4导航栏-正确的菜单到右边？
css、bootstrap-4
我正在使用Bootstrap 4默认导航条，我只想对菜单项在右边，而不是左边对齐。
这应该很简单对吧？但我已经在谷歌上搜索了25分钟，但没有成功。
我尝试过将ml-auto和justify-content-end添加到菜单div中，但它们都没有帮助。
这是我的代码：
更新:我似乎错误地使用了引导带3，哎呀。我想使用引导程序4，所以我已经更新了我的示例，并尝试添加.float-right ()：
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class=&
浏览 1提问于2019-01-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
