无法获得居中徽标以在崩溃时向右重新定位。
无法获得居中徽标以在崩溃时向右重新定位。
提问于 2018-06-27 05:32:57
我有困难，以获得徽标停留在右上侧的肚脐崩溃。请看图片中的问题。
审查守则：
<nav class="navbar navbar-expand-md fixed-top navbar-light blue-grey lighten-5 mx-auto">
<div class="container">
<!-- Collapse Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobileNav" aria-controls="mobileNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible Content -->
<div class="collapse navbar-collapse justify-content-md-center font-weight-bold" id="mobileNav">
<!-- Links Left -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Internet</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Building Managers</a>
</li>
</ul>
<!-- Navbar Brand -->
<a id="logo" class="navbar-brand" href="index.html">
<img class="hidden-sm-down" src="img/logoNav.png" alt="Lone Star Fiber">
</a>
<!-- Links Right -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Business Internet</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Developers</a>
</li>
</ul>
</div>
</nav>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-27 15:49:19
我认为这种方法应该类似于：引导具有左、中或右对齐项的NavBar
使用两个单独的nav-collapse与相同的.移动导航目标。使用order-*类在右边的移动菜单前显示徽标.
<nav class="navbar navbar-expand-md fixed-top navbar-light blue-grey lighten-5 mx-auto">
<div class="container">
<!-- Collapse Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".mobile-nav" aria-controls="mobileNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible Content -->
<div class="collapse navbar-collapse justify-content-md-center font-weight-bold mobile-nav order-2">
<!-- Links Left -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Internet</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Building Managers</a>
</li>
</ul>
</div>
<!-- Navbar Brand -->
<a id="logo" class="navbar-brand order-1 order-md-2 text-center" href="index.html">
<img class="" src="//placehold.it/130x30?text=Lone Star Fiber" alt="Lone Star Fiber">
</a>
<div class="collapse navbar-collapse justify-content-md-center font-weight-bold mobile-nav order-2">
<!-- Links Right -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Business Internet</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Developers</a>
</li>
</ul>
</div>
</div>
</nav>Stack Overflow用户
发布于 2018-06-27 06:20:45
使用d-none d-md-block在sm屏幕大小上隐藏图像，使用d-md-none d-sm-block显示不在sm大小上折叠的图像。
见小提琴：https://jsfiddle.net/khz5uv1r/25/
img{
height:50px;
width:50px;
} <nav class="navbar navbar-expand-md fixed-top navbar-light blue-grey lighten-5 mx-auto">
<div class="container">
<!-- Collapse Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobileNav" aria-controls="mobileNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Collapsible Content -->
<div class="pic d-md-none d-sm-block">
<a id="logo" href="index.html">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Lone Star Fiber">
</a>
</div>
<nav class="collapse navbar-collapse justify-content-md-center font-weight-bold" id="mobileNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Internet</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Building Managers</a>
</li>
<li class="nav-item pic d-none d-md-block">
<a id="logo" href="index.html">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Lone Star Fiber">
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Business Internet</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Developers</a>
</li>
</ul>
</div>
</div>
</nav>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51055136
复制相关文章
相似问题
腾讯云开发者
