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

玛丽亚

我正在尝试创建一个导航栏,该导航栏的左侧为“品牌”(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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使导航栏居中…

来自分类Dev

将引导导航栏向右对齐

来自分类Dev

引导程序:导航栏问题

来自分类Dev

隐藏引导程序导航栏品牌,并且仅在导航栏折叠时居中显示

来自分类Dev

引导中溢出的导航栏

来自分类Dev

导航栏未居中

来自分类Dev

居中导航栏品牌图像与居中导航栏

来自分类Dev

导航栏中的导航栏按钮项目“撰写”在右侧移动

来自分类Dev

引导程序-流体导航栏项目

来自分类Dev

导航栏不会居中

来自分类Dev

导航栏向左/向右移动

来自分类Dev

引导程序导航栏间距和居中

来自分类Dev

引导导航栏品牌响应性问题

来自分类Dev

导航栏中的居中链接

来自分类Dev

使导航栏居中…

来自分类Dev

居中水平导航栏

来自分类Dev

将导航栏居中

来自分类Dev

引导条居中于导航栏

来自分类Dev

引导程序-流体导航栏项目

来自分类Dev

导航栏中徽标居中

来自分类Dev

导航栏项目移动

来自分类Dev

导航栏居中

来自分类Dev

修复了引导程序中的导航栏

来自分类Dev

导航栏中的引导图片

来自分类Dev

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

来自分类Dev

引导程序4更改导航栏高度,导致导航栏项目未垂直居中

来自分类Dev

在导航栏中将品牌形象居中

来自分类Dev

在引导程序中将导航栏链接居中

来自分类Dev

引导导航栏链接和导航品牌为中心