Question

我一直在尝试使用导航栏解决问题。

我想做的是，在图像中显示中心的导航标题时，始终将主页图标放在左侧并设置在右侧。

但仍然看起来像这样在我的笔记本电脑1366px宽以外的最小/大屏幕中查看

有没有人可以帮我解决同样的问题？

这里的代码。

<nav>
  <div class="nav__container">
    <div class="nav__container--left">
      <div class="">         
        <a href="http://localhost/mpci_virtual_office/" title="Return Home">
          <i class="fa fa-home fa-lg" aria-hidden="true"></i>
        </a>
      </div>
    </div>
    <div class="nav__container--center">
      <strong>Home</strong>
    </div>
    <div class="nav__container--toggle">
      <a id="push" class="visible-xs visible-sm visible-md"><i class="fa fa-bars "></i></a>
    </div>
    <div class="nav__container--right">
      <a class="dropdown-toggle" data-toggle="dropdown" title="Settings">
        <i class="fa fa-gear fa-lg"></i>
      </a>
      <ul class="dropdown-menu">
        <li><a href="http://localhost/mpci_virtual_office/office/view_profile/index/1">View Profile</a></li>
        <li><a href="http://localhost/mpci_virtual_office/office/account_preference">Settings</a></li>
        <li><a href="http://localhost/mpci_virtual_office/auth/logout">Logout</a></li>
      </ul>
    </div>
  </div>
</nav>

这是我的CSS

/* Naviation Style */
.nav__container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 6;
}
.nav__container--left,
.nav__container--center,
.nav__container--toggle,
.nav__container--right {
  width: 50px;
  height: 100%;
  position: absolute;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items:center;
  align-content:  center;
}
.nav__container--left { }
.nav__container--left div { }
.nav__container--left div a { }
.nav__container--center {
  width: 100%;
  z-index: -1;
  text-align: center;
}
.nav__container--toggle {
  right: 50px;
}
.nav__container--right {
  right: 0;
}

Answer 1

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

试试这个css片段。如果你设置位置，你总是必须设置顶部|底部和左侧|右侧

Answer 2

以下内容应该有效（扩展片段）。

＆＃13;

/* Naviation Style */
.nav__container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 6;
}
.nav__container--left,
.nav__container--center,
.nav__container--toggle,
.nav__container--right {
  width: 50px;
  height: 100%;
  position: absolute;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items:center;
  align-content:  center;
}
.nav__container--left { }
.nav__container--left div { }
.nav__container--left div a { }
.nav__container--center {
  width: 100%;
  z-index: -1;
  text-align: center;
}
.nav__container--toggle {
  right: 50px;
}
.nav__container--right {
  right: 0;
}

.nav__container {
    position: fixed;
    background: cadetblue;
    left: 0;
    right: 0;
    height: auto;
    min-height: 50px;
    color: white;
}

ul.dropdown-menu {
    display: none;
}

.nav__container--right {
    background: #508587;
}

.nav__container--left {
    background: #508587;
}

body {
    min-height: 1000px;
}

＆＃13;

<nav>
  <div class="nav__container">
    <div class="nav__container--left">
      <div class="">         
        <a href="http://localhost/mpci_virtual_office/" title="Return Home">
          <i class="fa fa-home fa-lg" aria-hidden="true"></i>
        </a>
      </div>
    </div>
    <div class="nav__container--center">
      <strong>Home</strong>
    </div>
    <div class="nav__container--toggle">
      <a id="push" class="visible-xs visible-sm visible-md"><i class="fa fa-bars "></i></a>
    </div>
    <div class="nav__container--right">
      <a class="dropdown-toggle" data-toggle="dropdown" title="Settings">
        <i class="fa fa-gear fa-lg"></i>
      </a>
      <ul class="dropdown-menu">
        <li><a href="http://localhost/mpci_virtual_office/office/view_profile/index/1">View Profile</a></li>
        <li><a href="http://localhost/mpci_virtual_office/office/account_preference">Settings</a></li>
        <li><a href="http://localhost/mpci_virtual_office/auth/logout">Logout</a></li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

<强>本质：

.nav__container {
    position: fixed;
    background: cadetblue;
    left: 0;
    right: 0;
}

试图修复导航栏

2 个答案: