引导程序“导航栏品牌”导致“导航栏导航”项目从导航栏中的居中位置向右移动？

Maria 发表于 Dev

玛丽亚

我正在尝试创建一个导航栏，该导航栏的左侧为“品牌”（LOGO），而实际的导航项位于整个栏的中心。一周前刚开始学习Web开发时，我使用的是默认的Bootstrap导航栏。到目前为止是这样的：

导航栏的当前状态

但是，您可以看到导航项稍微移到了页面实际中心的右侧（标题“ This is HOME page。”正好在页面内居中）。这是我认为可能与代码有关的部分：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container-fluid {
  background-color: white;
  border: none;
  box-shadow: none;
}
.content {
  padding-top: 65px;
  width: 100%;
  height: 100%;
}
.navbar .navbar-collapse {
  text-align: center;
  background-color: cyan;
}
.navbar .navbar-nav {
  margin: 1%;
  display: inline-block;
  float: none;
  vertical-align: center;
  text-decoration: bold;
  text-align: center;
}
.navbar-default {
  background-color: white;
  box-shadow: none;
  text-align: center;
}
.navbar-header {
  margin: 1%;
}

<!-- Navigation bar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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" href="index.html" id="logo">LOGO</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </div>
  <!-- /.navbar-collapse -->
</div>
  <!-- /.container-fluid -->
</nav>

I am suspicious of the "navbar-brand" as it seems to interfere somehow when I try to change the text-align for ".navbar .navbar-collapse," (colored cyan just for ease of formatting) which I have set to "center" as other answers on StackOverflow have suggested.

For example, when I change the text-align to "left":

.navbar .navbar-collapse {
  text-align: left;
  background-color: cyan;
}

the navigation bar looks like this: 导航栏折叠文本左对齐

Changing the text-align to "right" pushes the navigation items all the way over to the right side of the cyan bar, as expected.

Thus, it appears that the navigation items are being centered between the "navbar-brand" and the right side of the bar rather than between the actual left and right sides of the entire bar.

是否有人对如何使我的导航项目准确地位于整个栏中居中有任何建议，以使它们与标题“这是主页”一致？而不是向右移动？

查理

有几种不同的方法可以做到这一点，我想这取决于您将来会做些什么，但是最简单的方法可能是将.navbar品牌从文档流中剔除，以便使用。 navbar-nav在居中时会忽略它。

您可以通过添加如下内容轻松地做到这一点：

.navbar-brand {
  position: absolute;
}

您可以在这里查看：http : //codepen.io/anon/pen/PNMBQx

希望对您有所帮助，并祝您好运！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-03-1

我来说两句

0条评论

登录后参与评论

上一篇：OpenGL ES 2.0 Android Alpha显示为黑色

来自分类Dev

Related 相关文章

文章