我正在尝试制作一个带有Bootstrap的导航栏，左侧有一个品牌标识，中间有几个可变宽度的链接，右边有一些固定宽度的按钮。我希望所有东西都在一行上，而可变宽度按钮只适合任何可用的空间。
见这里：https://jsfiddle.net/wfu6yxqd/
2个固定宽度按钮应位于可变宽度链接的右侧
我不需要Bootstrap的内置导航栏折叠行为，因此在我的导航栏定义中不需要（我在某些屏幕尺寸上实现自己的自定义折叠）
非常感谢您的帮助！
代码：
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
<ul class="nav nav-justified">
<li><a href="">Variable width link 1</a></li>
<li><a href="">Variable width link 2</a></li>
</ul>
</div>
<div> <!-- class="navbar-header" ?? -->
<a class="btn btn-xs btn-default">Fixed width button</a>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">FW drop down <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
</ul>
</div>
</div>
</nav>
答案 0 :(得分：1)
这个https://jsfiddle.net/t58f873j/
怎么样？<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="row">
<div class="col-xs-2">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="col-xs-6 text-center">
<ul class="nav nav-justified">
<li><a href="">Variable width link 1</a></li>
<li><a href="">Variable width link 2</a></li>
</ul>
</div>
<div class="col-xs-4">
<a class="btn btn-xs btn-default">Fixed width button</a>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">FW drop down <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
</ul>
</div>
</div>
</div>
</nav>
答案 1 :(得分：1)
以下是一种方法：您可以在按钮的navbar-nav部分之外/之后创建一个div，并将该部分与navbar相符。
*我离开了可折叠功能，因为我想象你会有一些移动导航的东西会有类似的元素可以解决。
参见示例
body,
html {
margin-top: 75px;
}
.navbar.navbar-custom {
list-style: none;
background: #444;
line-height: 60px;
margin: 0;
height: 60px;
}
.navbar.navbar-custom .navi {
display: table;
width: 100%;
list-style: none;
text-align: center;
}
.navbar.navbar-custom .navi > li {
display: table-cell;
cursor: pointer;
}
.navbar.navbar-custom .navi > li > a {
text-align: center;
text-decoration: none;
color: #fff;
}
.navbar.navbar-custom .logo-brand {
margin-left: 15px;
color: #fff;
text-decoration: none;
}
.navbar.navbar-custom .btn-nav {
text-align: right;
}
.navbar.navbar-custom .btn-nav .btn.btn-black {
height: 50px;
border-radius: 0;
background: #444;
color: #fff;
border: none;
outline: none;
box-shadow: none;
}
.navbar-custom .btn-group .dropdown-menu,
.navbar-custom .btn-group .dropdown-menu:hover,
.navbar-custom .btn-group .dropdown-menu:focus {
left: auto;
right: 0;
border: none;
background: #444;
border-radius: 0;
}
.navbar-custom .btn-group .dropdown-menu > li > a {
color: #fff;
}
.navbar-custom .btn-group .dropdown-menu > li > a:hover {
background: #222;
}
.no-gutter >[class*='col-'] {
padding-right: 0;
padding-left: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-custom navbar-fixed-top">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-xs-2"><a class="logo-brand" href="#">Logo Brand</a>
</div>
<div class="col-xs-8">
<ul class="navi">
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
</ul>
</div>
<div class="col-xs-2">
<div class="btn-nav">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-black">1</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-black dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">2 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Button link 1</a>
</li>
<li><a href="#">Button link 1</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="container">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de
Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College
in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32
and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit
amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor
at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from
sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem
ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem
Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem
Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard
McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable
source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first
line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
</div>