引导ul导航浮动权利，但从左到右排序 [英] Bootstrap ul navigation float right but order left to right
问题描述
我试图用9（不要笑我的客户端）按钮来编写引导导航结构。
我想将前5个按钮放在另一个4之上，右对齐。问题是，当我们将它们对准右侧时，按钮顺序颠倒。我通过创建两个不同的列表解决了这个问题，但这使得它在屏幕更小时反转。我认为应该有一个简单的解决方案，但我找不到它。您可以在以下网址查看示例： http://www.sanderfish.nl/haptokuijpers/index.html
这是我的HTML：
< div class =navbar navbar-inverse navbar-static-top>
< div class =container>
< div class =navbar-left navbar-header>
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< a class =navbar-brandhref =index.html>< img src =assets / img / logo.png< / a>
< / div>
< div class =navbar-collapse collapse>
< ul class =nav navbar-nav navbar-right>
< li>< a href =index.html>首页< / a>< / li>
< li>< a href =voor-wie.html> Voor wie< / a>< / li>
< li>< a href =psychosomatiek.html> Psychosomatiek< / a>< / li>
< li>< a href =haptotherapie.html> Haptotherapie< / a>< / li>
< li>< a href =diana-kuijpers.html> Diana Kuijpers< / a>< / li>
< li>< a href =vergoeding.html> Vergoeding< / a>< / li>
< li>< a href =klachtenlijsten.html> Klachtenlijsten< / a>< / li>
< li>< a href =uitgeverij-vib.html> Uitgeverij VIB< / a>< / li>
< li>< a href =contact.html>联系人< / a>< / li>
< / ul>
< / div><！ - /。nav-collapse - >
< / div>
< / div>
这是CSS：
@media（min-width：768px）{
.navbar-nav {
float：right;
margin：0;
text-align：right;
}
.navbar-nav> li {
float：left;
text-align：right;
}
.navbar-nav> li> a {
padding-top：20px;
padding-bottom：10px;
display：block;
text-align：right;
}
.navbar-nav.navbar-right：last-child {
margin-right：0px;
text-align：right;
}
}
@media（min-width：768px）{
.navbar-left {
float：left！important;
}
.navbar-right {
float：right！important;
padding-right：34px;
text-align：right;
max-width：750px;
}
}
提前感谢！
您不需要任何自定义CSS，只需将两个链接分隔成 navbar-navs ，然后在您要改变的对象上执行 navbar-right ：DEMO： http://www.bootply.com/X0kDjEwnga
< div class = navbar-collapse collapse>
< ul class =nav navbar-nav>
< li>< a href =index.html>首页< / a>< / li>
< li>< a href =voor-wie.html> Voor wie< / a>< / li>
< li>< a href =psychosomatiek.html> Psychosomatiek< / a>< / li>
< li>< a href =haptotherapie.html> Haptotherapie< / a>< / li>
< li>< a href =diana-kuijpers.html> Diana Kuijpers< / a>< / li>
< / ul>
< ul class =nav navbar-nav navbar-right>
< li>< a href =vergoeding.html> Vergoeding< / a>< / li>
< li>< a href =klachtenlijsten.html> Klachtenlijsten< / a>< / li>
< li>< a href =uitgeverij-vib.html> Uitgeverij VIB< / a>< / li>
< li>< a href =contact.html>联系人< / a>< / li>
< / ul>
< / div><！ - /。nav-collapse - >
您可能需要在特定中间宽度之间解决它们的重叠，但这是另一个故事。 / p>
I am trying to code a bootstrap navigation structure with 9 (don't laugh at my client please) buttons.
I want the first 5 buttons on top of the other 4, aligned to the right. The problem is that when I align them to the right, the buttons reverse in order. I solved this by creating two different lists, but that makes it reverse it when making the screen smaller. I think there should be a simple solution, but I can't find it. You can see an example at: http://www.sanderfish.nl/haptokuijpers/index.html
Here is my HTML:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-left navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="assets/img/logo.png"</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="voor-wie.html">Voor wie</a></li>
<li><a href="psychosomatiek.html">Psychosomatiek</a></li>
<li><a href="haptotherapie.html">Haptotherapie</a></li>
<li><a href="diana-kuijpers.html">Diana Kuijpers</a></li>
<li><a href="vergoeding.html">Vergoeding</a></li>
<li><a href="klachtenlijsten.html">Klachtenlijsten</a></li>
<li><a href="uitgeverij-vib.html">Uitgeverij VIB</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
And this is the CSS:
@media (min-width: 768px) {
.navbar-nav {
float: right;
margin: 0;
text-align: right;
}
.navbar-nav > li {
float: left;
text-align: right;
}
.navbar-nav > li > a {
padding-top: 20px;
padding-bottom: 10px;
display: block;
text-align: right;
}
.navbar-nav.navbar-right:last-child {
margin-right: 0px;
text-align: right;
}
}
@media (min-width: 768px) {
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
padding-right: 34px;
text-align: right;
max-width: 750px;
}
}
Thanks in advance!
You don't need any custom CSS, just separate the two chunks of links into separate navbar-navs, and do navbar-right on the one you want to the right: DEMO: http://www.bootply.com/X0kDjEwnga
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="voor-wie.html">Voor wie</a></li>
<li><a href="psychosomatiek.html">Psychosomatiek</a></li>
<li><a href="haptotherapie.html">Haptotherapie</a></li>
<li><a href="diana-kuijpers.html">Diana Kuijpers</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="vergoeding.html">Vergoeding</a></li>
<li><a href="klachtenlijsten.html">Klachtenlijsten</a></li>
<li><a href="uitgeverij-vib.html">Uitgeverij VIB</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
You may need to address their overlap when at specific in-between widths, but that's another story.
这篇关于引导ul导航浮动权利，但从左到右排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
