我一直试图这样做几天没有任何完整的结果,我一直在尝试从这里提出的其他问题的代码,什么都没有。我希望我的导航栏品牌位于左侧,中间的一些图标和右侧的一个图标,我希望所有这些都可以折叠。我尝试了所有的东西,但是Flexbox在可折叠的div上对我不起作用,我唯一可以做的就是我最接近我的目标是:
doMagic
结果如下:
但是一旦我激活了可折叠的导航栏,所有内容都会再次混乱,因为该容器占用了大量空间,而且我尝试过的任何东西都可以修复它
如果我添加背景,你可以看到它占用了多少空间
真诚的我不知道还有什么尝试,这让我发疯了。
编辑:ZimSystem解决方案有效,但存在问题。当项目崩溃时,它们中的每一个都占据整行。当菜单折叠时,我想要一个显示内联,一个选项是水平显示所有这些内容答案 0 :(得分:0)
使用Bootstrap 4有几种不同的方法,但我认为最简单的方法是分离navbar-collapse
,给每个Navbar部分一个定义的宽度(使用w-*
),然后使用toggler来切换navbar-collapse
。
<nav class="navbar navbar-expand-lg bg-light navbar-light" role="navegador">
<a class="navbar-brand w-25" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-target=".navbar-collapse" data-toggle="collapse" aria-label="Expandir navegador" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-50" id="navegador">
<div class="navbar-nav mx-auto justify-content-center">
<a data-toggle="tooltip" data-placement="bottom" title="Comprar" class="nav-item nav-link rounded" href="#"><span class="far fa-handshake icon-nav"></span></a>
<a data-toggle="tooltip" title="Vender" class="nav-item nav-link rounded" href="#"><span class="fas fa-hand-holding-usd icon-nav"></span></a>
<a data-toggle="tooltip" title="Mi carrito" class="nav-item nav-link rounded" href="#"><span class="fas fa-shopping-cart icon-nav"></span></a>
</div>
</div>
<div class="collapse navbar-collapse w-25" id="navegador2">
<form id="form-iSesion" class="navbar-nav w-100 justify-content-end" action="procesos.php" method="POST">
<a data-toggle="tooltip" title="Entrar o registrarse" id="iSesion" class="nav-item nav-link rounded" href="#"><span class="fas fa-user icon-nav"></span></a>
<input type="hidden" name="menu" value="1">
</form>
</div>
</nav>
答案 1 :(得分:0)
这是一个使用Bootstrap v4的通用示例,按照您的要求进行操作。默认情况下,“中心”菜单位于徽标和右侧菜单之间的可用空间中心。请注意中间元素上的ml-auto mr-auto
类。他们将auto
应用于左右边距,使其居中。
如果您想在浏览器中使用完美的中心,您唯一的选择是使品牌和正确的菜单在其父级流中具有相同的宽度。一种快捷的方法是使用position:absolute
将其从父流中取出,但您需要使用top/left/right
属性定位徽标和右侧菜单,并确保它们不与任何响应间隔的中心菜单。
但最简单的解决方法是为较小的一个添加一个边距,因此它会达到较大一个的大小。在下面的示例中,我为徽标添加了22px
的右边距,这是其宽度与右边菜单宽度之间的差异。 (86.25 - 64.48):
@media (min-width: 992px) {
nav .navbar-brand {
margin-right: 22px;
}
}
/* YOU DON'T NEED THE CSS BELOW, I ADDED IT TO
SHOW THE MENU IS CENTERED */
/* marking the center of the nav */
@media (min-width: 992px) {
nav:after {
width: 3px;
content: '';
position: absolute;
background-color: red;
height: 100px;
left: 50%;
transform: translateX(-50%);
top: 100%;
}
}
/* marking the center of the navbar-nav */
@media (min-width: 992px) {
.navbar-nav.ml-auto.mr-auto {
position: relative;
}
.navbar-nav.ml-auto.mr-auto:after {
width: 1px;
content: '';
position: absolute;
background-color: black;
height: 50px;
left: 50%;
transform: translateX(-50%);
top: 100%;
z-index: 1;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Some link</a>
</li>
</ul>
</div>
</nav>
Alernatively,这可以通过Javascript:
完成(function($) {
let centerMenu = function() {
let $left = $('.navbar-brand'),
$right = $('.navbar-nav', 'nav').last(),
hasWidth = function(e) {
return e.is('*') && e.width() > 0
}
if (hasWidth($left) && hasWidth($right) && $(window).width() > 992) {
if ($left.width() > $right.width()) {
$right.css({
marginLeft: ($left.width() - $right.width()) + 'px'
});
} else {
$left.css({
marginRight: ($right.width() - $left.width()) + 'px'
})
}
$(window).off('load resize', centerMenu);
}
};
$(window).on('load resize', centerMenu);
})(jQuery)