Html 引导4导航栏折叠菜单，元素位于右列
我尝试了很长一段时间，以实现一个移动菜单使用引导4。我的主要目标是在手机菜单的同一行显示3个品牌文本和切换按钮。但不幸的是，当我点击切换按钮时，3个品牌都在折叠菜单的下方。我想3个品牌保持在一行的顶部与切换按钮，即使在折叠菜单。我的问题是折叠菜单使用了100%的列宽，这最终会将3个品牌推到菜单下方。任何帮助都将不胜感激 目标解决方案 HTMLHtml 引导4导航栏折叠菜单，元素位于右列,html,css,twitter-bootstrap,bootstrap-4,Html,Css,Twitter Bootstrap,Bootstrap 4,我尝试了很长一段时间，以实现一个移动菜单使用引导4。我的主要目标是在手机菜单的同一行显示3个品牌文本和切换按钮。但不幸的是，当我点击切换按钮时，3个品牌都在折叠菜单的下方。我想3个品牌保持在一行的顶部与切换按钮，即使在折叠菜单。我的问题是折叠菜单使用了100%的列宽，这最终会将3个品牌推到菜单下方。任何帮助都将不胜感激 目标解决方案 HTML <body id="page-top"> <nav class="navbar navbar-dark bg-primary nav
<body id="page-top">
<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
<div class="container">
<button class="navbar-toggler hidden-md-up pull-xs-right" data-target="#collapsenav" data-toggle="collapse" type="button">
☰
</button>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="navbar-toggleable-sm collapse text-xs-center" id="collapsenav">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Resume</a></li>
</ul>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-4">
<a class="navbar-brand" href="#home">Brand-1</a>
</div>
<div class="col-md-2 col-sm-4 col-xs-4">
<a class="navbar-brand" href="#home">Brand-2</a>
</div>
<div class="col-md-2 col-sm-4 col-xs-4">
<a class="navbar-brand" href="#home">Brand-3</a>
</div>
</div>
</div>
</nav>
</body>
☰
这三个品牌必须在右边吗 使用Bootstrap，您只需在导航列表内容的按钮和div之间移动导航品牌链接，就可以轻松地将品牌显示在左侧。这将使你的3个品牌保持原样，不会被推倒
<body id="page-top">
<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
<div class="container">
<button class="navbar-toggler hidden-md-up pull-xs-right" data-target="#collapsenav" data-toggle="collapse" type="button">
☰
</button>
//move brand items here
<a class="navbar-brand" href="#home">Brand-1</a>
<a class="navbar-brand" href="#home">Brand-2</a>
<a class="navbar-brand" href="#home">Brand-3</a>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="navbar-toggleable-sm collapse text-xs-center" id="collapsenav">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Resume</a></li>
</ul>
</div>
</div>
//delete these out
<div class="col-md-2 col-sm-4 col-xs-4">
<a class="navbar-brand" href="#home">Brand-1</a>
</div>
<div class="col-md-2 col-sm-4 col-xs-4">
<a class="navbar-brand" href="#home">Brand-2</a>
</div>
<div class="col-md-2 col-sm-4 col-xs-4">
<a class="navbar-brand" href="#home">Brand-3</a>
</div>
</div>
</div>
</nav>
</body>
☰
//将品牌项目移到此处
//删除这些
<body id="page-top">
<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
<div class="container">
<button class="navbar-toggler hidden-md-up pull-xs-right" data-target="#collapsenav" data-toggle="collapse" type="button">
☰
</button>
//show these here on small screens
<a class="navbar-brand" href="#home">Brand-1</a>
<a class="navbar-brand" href="#home">Brand-2</a>
<a class="navbar-brand" href="#home">Brand-3</a>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="navbar-toggleable-sm collapse text-xs-center" id="collapsenav">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Resume</a></li>
</ul>
</div>
</div>
//show these below on large screens
<div class="col-md-2 col-sm-4 col-xs-4">
<a class="navbar-brand" href="#home">Brand-1</a>
</div>
<div class="col-md-2 col-sm-4 col-xs-4">
<a class="navbar-brand" href="#home">Brand-2</a>
</div>
<div class="col-md-2 col-sm-4 col-xs-4">
<a class="navbar-brand" href="#home">Brand-3</a>
</div>
</div>
☰
//在小屏幕上显示这些
//在大屏幕上显示以下内容
我还是比较新的编码，所以我希望这有帮助 尝试使用新的引导4 alpha 6 flexbox实用程序进行对齐，并使标记更简单：
最好使用最新的alpha 6，而不是alpha 3。这对你来说可能吗？是的，我当然可以使用alpha 6，但它如何帮助实现我所寻找的解决方案？有没有关于@ZimSystem的想法？另外，请解释您希望看到的非移动水平版菜单。。以前是手机版。嘿，非手机版的桌面版看起来就像它现在看着我的笔一样。桌面版不需要更改…我只是被手机版卡住了，因为它把我的三个品牌压到了手机版下面，我认为您的答复是最终的答案，因为它是非常干净的，没有任何重复HTML代码。它很好地解决了我遇到的问题。非常感谢，干杯@ZimStudio感谢您的提示，但不能认为它是一个完整的证明解决方案。但您的调整/解决方案也值得赞赏。谢谢，伙计，干杯！
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary fixed-top">
<div class="container">
<div class="d-flex w-100 justify-content-between flex-last">
<button class="navbar-toggler align-self-end mb-1" data-target="#collapsenav" data-toggle="collapse" type="button">
☰
</button>
<div class="d-flex w-100 flex-first justify-content-between">
<a class="navbar-brand" href="#home">Brand-1</a>
<a class="navbar-brand" href="#home">Brand-2</a>
<a class="navbar-brand" href="#home">Brand-3</a>
</div>
</div>
<div class="navbar-collapse collapse w-100" id="collapsenav">
<ul class="nav navbar-nav align-items-center">
<li class="nav-item active"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Resume</a></li>
</ul>
</div>
</div>
</nav>
@media (max-width:767px) {
.container {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}