Question

所以我为一家公司设计了一个模拟网站布局，这样我就可以在Twitter的Bootstrap 3上测试我的技能，但是我在将我在photoshop上设计的内容转换为代码时遇到了问题。

我正在尝试将整个导航栏内容集中在一起，并在品牌徽标的两侧显示链接。我已经检查过在线，谷歌，stackoverflow等等，但我似乎无法在我设计的任何地方得到它！我很难理解它。看起来它应该很简单，而且我刚刚推翻它的复杂性！链接需要是图像的中心，但也是导航栏本身的中心。布局如下：

[link] [link] [LOGO] [link] [link]

这是上述设计的图像：

Answer 1

您也可以尝试使用flexbox显示。为了实现它，您将不得不：

将display: flex属性添加到需要对齐的元素的父元素中（在本例中：导航栏中的<ul>元素，其中包含导航链接和品牌列表图像）
为您需要对齐的元素设置margin: auto（在这种情况下：在<li>元素上）

可选：如果您不希望元素显示在一行（默认行为），请调整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
        }

Answer 2

要使浮动的navbar-nav居中，您可以使用left本身以及列表项或子元素上的相对位置和否定right，navbar-nav值。

要确保徽标始终居中，您可以考虑不使用nav-justified，而是使用固定值navbar-nav，在锚标记上使用左右padding的固定值，但是不同屏幕的个别值。

要使垂直对齐工作，只需将相应的line-height添加到锚标记。

我决定隐藏实际的navbar-brand并仅在sx断点上显示它。对于居中的徽标，它是另一种方式，因此我们在折叠导航中没有徽标。看看这个例子，我相信你会明白这个想法。

以下是示例。

＆＃13;

@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;
  } 
}

＆＃13;

<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>

＆＃13;

如何在导航链接之间将带有品牌形象的Bootstrap导航栏居中？

2 个答案: