css Bootstrap 固定在顶部导航栏的顶部-带有徽标(左侧)和导航链接(右侧)[重复]

omhiaaxx 于 2023-05-08 发布在 Bootstrap

关注(0)|答案(2)|浏览(143)

此问题已在此处有答案：

Bootstrap NavBar with left, center or right aligned items（14个答案）
3天前关闭。
此帖子3天前编辑并提交审核，未能重新打开帖子：
原始关闭原因未解决
我正在与一个简单的导航栏斗争。我不能做出一个响应固定到顶部的导航栏与标志和导航链接在双方。
我在这里分享的代码中摆脱了与Bootstrap相关的一切，你能看一下并保存我吗？
我正在寻找一个引导的解决方案，使事情的React。谢谢。

.nav-bar {
  display: flex;
  justify-content: space-between;
  position: fixed;
  align-items: center;
}

.header-top {
  height: 100px;
  display: flex;
  justify-content: space-between;
  padding: 15px 30px 0 10px;
}

.nav-links {
  display: flex;
  right: 20px;
}

.header-nav-blocks {
  height: 50px;
  margin-left: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-nav-button {
  display: flex;
  flex-direction: column;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<header>
  <div class="header-top">
    <nav class="nav-bar">
      <img src="https://via.placeholder.com/50" alt="logo oc" />
      <ul class="nav-links">
        <li class="header-nav-blocks">
          <a href="#A" class="navlinks">A</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#B" class="navlinks">B</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#C" class="navlinks">C</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#D" class="navlinks">D</a>
        </li>
        <li class="header-nav-button">
          <a href="" class="button-link">Blog</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

css

来源：https://stackoverflow.com/questions/76173310/bootstrap-fixed-top-the-top-navbar-with-logo-lef-and-navlinks-right

2条答案

按热度按时间

mklgxw1f1#

所有你需要做的就是让你的导航栏全宽。当你将一个元素设置为flex容器时，默认情况下它会折叠到其子元素的宽度。

.nav-bar {
  display: flex;
  justify-content: space-between;
  position: fixed;
  align-items: center;
  width: 100%;
}

.header-top {
  height: 100px;
  display: flex;
  justify-content: space-between;
  padding: 15px 30px 0 10px;
}

.nav-links {
  display: flex;
  right: 20px;
}

.header-nav-blocks {
  height: 50px;
  margin-left: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-nav-button {
  display: flex;
  flex-direction: column;
}

<header>
  <div class="header-top">
    <nav class="nav-bar">
      <img src="https://via.placeholder.com/50" alt="logo oc" />
      
      <ul class="nav-links">
        <li class="header-nav-blocks">
          <a href="#A" class="navlinks">A</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#B" class="navlinks">B</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#C" class="navlinks">C</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#D" class="navlinks">D</a>
        </li>
        <li class="header-nav-button">
          <a href="" class="button-link">Blog</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

赞(0）回复(0）举报 2023-05-08

s5a0g9ez2#

我认为你正在努力实现这一点：

.header-top {
  min-height: 100px;
  padding: 15px 30px 0 10px;
}
.nav-bar {
  display: flex;
  justify-content: space-between;
  position: fixed;
  align-items: center;
  flex: 100vw;
  width: 100vw;
  flex-direction: column;
}
.nav-bar img {
  height: 100px;
  width: 100vw;
}
.nav-links {
  display: flex;
  flex: 100vw;
  width: 100vw;
  justify-content: right;
}

.header-nav-blocks {
  height: 50px;
  margin-left: 40px;
  text-align: right;
}

.header-nav-button {
  margin-left: 5vw;
  margin-right: 5vw;
  display: flex;
  flex-direction: row;
}

<header>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <div class="header-top">
    <nav class="nav-bar">
      <img src="assets/img/logo-oc.png" alt="logo oc" />
      <ul class="nav-links">
        <li class="header-nav-blocks">
          <a href="#A" class="navlinks">A</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#B" class="navlinks">B</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#C" class="navlinks">C</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#D" class="navlinks">D</a>
        </li>
        <li class="header-nav-button">
          <a href="" class="button-link">Blog</a
                >
              </li>
            </ul>
          </nav>
        </div>
      </header>

赞(0）回复(0）举报 2023-05-08

我来回答

css Bootstrap 固定在顶部导航栏的顶部-带有徽标(左侧)和导航链接(右侧)[重复]

2条答案

相关问题

热门标签

最新问答