如何在导航链接之间设置一个带有品牌形象的引导导航条？
所以我为一家虚构的公司设计了一个模拟的网站布局，这样我就可以在Twitter的Bootstrap 3上测试我的技能，但是我在将我在photoshop上设计的东西转发到代码时遇到了问题。
我正试图使整个导航条的内容为中心，在品牌标志的任何一边的链接。我已经检查了在线，谷歌，堆栈溢出等，但我似乎无法使它接近我的设计！我很难把头绕着它走。它看起来应该很简单，我只是想了一下它的复杂性！链接需要以图像为中心，但也要以导航条本身为中心。其布局如下：
链接标志链接
以下是上述设计的图像：
回答 2
Stack Overflow用户
发布于 2015-08-23 18:05:55
要将浮动的navbar-nav作为中心，可以在left本身和列表项或子元素上使用相对位置和负left、right值。
为了确保徽标始终以中心为中心，您可能会考虑不使用nav-justified，而是在锚标记上使用固定的左、右padding值的常规navbar-nav，但是对于不同的屏幕使用单独的值。
要使垂直对齐工作，只需向锚标记添加适当的line-height即可。
我已经决定隐藏实际的navbar-brand，只在sx断点上显示它。对于居中的标志，它是相反的，所以我们没有在崩溃的导航内的标志。看看这个例子，我相信你会明白的。
这是一个例子。
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
.navbar {
background-color: #231f20;
min-height: auto;
position: relative;
top: 0px;
font-size: 13px;
width: auto;
border-bottom: none;
margin-bottom: 0px;
padding: 40px 0px;
}
.navbar-brand {
padding: 0 15px;
height: 96px;
}
@media (min-width: 768px) {
.navbar-nav {
position: relative;
right: -50%;
}
.navbar-nav > li {
position: relative;
left: -50%;
}
.navbar-nav > li a {
line-height: 126px;
vertical-align: middle;
padding: 0 24px;
}
}
@media (min-width: 992px) {
.navbar-nav > li a {
padding: 0 48px;
}
}
@media (min-width: 1200px) {
.navbar-nav > li a {
padding: 0 68px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Who We Are</a></li>
<li><a href="#">Our Food</a></li>
<li class="hidden-xs"><a href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a></li>
<li><a href="#">Book a Table</a></li>
<li><a href="#">Promotions</a></li>
</ul>
</div>
</div>
</nav>
Stack Overflow用户
发布于 2015-08-23 16:29:53
您也可以尝试柔性盒显示。为了实现它，您必须：
- 将
display: flex属性添加到您需要对齐的元素的父元素中(在本例中:在导航栏中的<ul>元素上，该元素包含导航链接列表和品牌图像) - 为需要对齐的元素设置
margin: auto(在本例中:在<li>元素上)
可选:如果不希望元素出现在行中(默认为bahavior)，请调整flex-direction属性的值。例如，如果您希望垂直列出元素，请将flex-direction: column;添加到<ul>元素中。
下面是一个示例代码，有两个不同的图像位置:移动设备列表的顶部和小型设备及以上设备的行中间。
HTML:
...
<nav class="container">
<div class="row visible-xs text-center">
<div class="col-xs-12">
<a href="#"><img src="images/logo.png" alt="BLUE|BERY"/></a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<ul class="text-center">
<li><a href="#">Who We Are</a></li>
<li><a href="#">Our Food</a></li>
<li class="hidden-xs"><a href="#"><img src="images/logo.png" alt="BLUE|BERY"/></a></li>
<li><a href="#">Book a Table</a></li>
<li><a href="#">Promotions</a></li>
</ul>
</div>
</div>
</nav>
...
CSS:
body {background-color: #333333;}
nav {background-color: #000000;}
nav ul {
display: flex;
list-style-type: none;
padding-left: 0; //in order to eliminate Bootstrap's built-in 40px padding
}
nav ul > li {margin: auto;} //N.B. don't alter the margin property, if you want some further adjustments, use padding!
nav ul > li > a:link, :visited, :hover, :active {
color: #ffffff;
text-decoration:none;
}
@media all and (max-width:767px) {
nav a > img {margin: 20px auto;}
nav ul {flex-direction: column;} //only if you want to change the default direction
}https://stackoverflow.com/questions/32167061
复制相似问题
腾讯云开发者
