导航栏上的菜单项和导航栏左侧的公司图标
Posted
技术标签:
【中文标题】导航栏上的菜单项和导航栏左侧的公司图标【英文标题】:menu items on the navigation bar and company icon on the left side of the nav bar 【发布时间】:2021-12-28 19:46:03 【问题描述】:我的网页上有以下代码:
<nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; ">
<div class="container-fluid">
<span class="navbar-brand" style="display:flex;">
<img src="~/Images/InfoOrange.png" class="d-inline-block align-middle mr-2" runat="server" />
<span style="font-size:25px;color:white;"><span style="color:#e9c46a">Test City</span><br />Test Company</span>
</span>
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<%-- <li class="nav-item active"><a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a></li>--%>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Users
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="Depatment.aspx">Department</a>
<%-- <a class="dropdown-item" href="#">Sections</a>--%>
</div>
</li>
<li> </li>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="admindropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="NewBoxFolder.aspx">Box/Folder</a>
<a class="dropdown-item" href="#">Configuration</a>
</div>
</li>
<li> </li>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="recordsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Records
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="FileUpload.aspx">BlockChain Upload</a>
<a class="dropdown-item" href="#">Verify</a>
<a class="dropdown-item" href="DocReport.aspx">Report</a>
<a class="dropdown-item" href="BucketList.aspx">S3 List</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
当我在网页上看到导航栏和菜单项时。它们看起来像这样:
我想将徽标和公司名称带到导航栏的左侧,并将菜单项放在菜单栏的右侧,并且我希望菜单项可以水平而不是垂直显示。我不确定我做错了什么。
我们将不胜感激。
【问题讨论】:
【参考方案1】:确保在查看 sn-p 时单击整页。一切都应该按照你想要的方式定位,但不想弄乱你的下拉菜单项,因为我假设你有 js
或类似的东西。你可以把media-queries
打上来调整浏览器的响应速度。
ul
display: flex;
position: absolute;
top: 0;
right: 0;
<nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; ">
<div class="container-fluid">
<span class="navbar-brand" style="display:flex;">
<img src="~/Images/InfoOrange.png" class="d-inline-block align-middle mr-2" runat="server" />
<span style="font-size:25px;color:white;"><span style="color:#e9c46a">Test City</span><br />Test Company</span>
</span>
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<!-- <li class="nav-item active--><a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Users
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="Depatment.aspx">Department</a>
<!-- <a class="dropdown-item" href="#">Sections</a>-->
</div>
</li>
<li> </li>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="admindropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="NewBoxFolder.aspx">Box/Folder</a>
<a class="dropdown-item" href="#">Configuration</a>
</div>
</li>
<li> </li>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="recordsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Records
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="FileUpload.aspx">BlockChain Upload</a>
<a class="dropdown-item" href="#">Verify</a>
<a class="dropdown-item" href="DocReport.aspx">Report</a>
<a class="dropdown-item" href="BucketList.aspx">S3 List</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
【讨论】:
以上是关于导航栏上的菜单项和导航栏左侧的公司图标的主要内容,如果未能解决你的问题,请参考以下文章
Bootstrap 3 Navbar 左侧和右侧导航栏项目的左侧折叠菜单
如何在导航栏上的 UIBarButtonItem 内偏移 UIButton 图像?