我如何将左右徽标/品牌文字对齐，菜单中心和右搜索？

发布于 2025-02-09 07:50:07 字数 4681 浏览 1 评论 0原文

我正在尝试在Bootstrap 5中制作一个Navbar。我想在左侧有徽标（在我的情况下，这只是一些花哨的文字）。然后，我想要菜单中心和右侧的搜索字段。我似乎遇到的问题是，当我设法将它们像这样排队时，菜单正在搜索和徽标divs的中心，这是由于徽标大小等，不一定是我屏幕的中间就像我想要的。我已经在她身上尝试了几天，但似乎无法做到正确。我还希望移动菜单崩溃并包括搜索。然后，移动菜单应在中心对齐徽标，并且在其下方的塌陷按钮也将其居中。

我尝试过的最新代码是：

index.html：

{% load static %}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %}Life With Vicky</title>
    <meta name="description" content="{% block meta_description %}{%endblock %}">
    {% block canonical %}{%endblock %}
    {% block opengraph %}{%endblock %}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" type='text/css' href="{% static 'css/main.css' %}">
</head>

<body>
    <nav class="navbar navbar-dark navbar-expand-md py-3 w-100" style="background-color:#FCC1C5">
        <div class="container-fluid">
            <a class="navbar-brand d-flex align-items-center" href="{% url 'home' %}">
                <span>
                    Life With Vicky
                </span>
            </a>
            <button class="navbar-toggler ml-auto" data-bs-toggle="collapse" data-bs-target="#navcol-6"><span
                    class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div id="navcol-6" class="collapse navbar-collapse flex-grow-0 order-md-first">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item"><a class="nav-link {% if active_tab == 'home' %}active{% endif %}"
                            href="{% url 'home' %}">Home</a></li>
                    <li class="nav-item"><a class="nav-link {% if active_tab == 'blog' %}active{% endif %}"
                            href="{% url 'blog' %}">Blog</a></li>
                    <li class="nav-item"><a class="nav-link {% if active_tab == 'about' %}active{% endif %}"
                            href="{% url 'about' %}">About</a></li>
                    <li class="nav-item"><a class="nav-link {% if active_tab == 'recommendations' %}active{% endif %}"
                            href="{% url 'recommendations' %}">Recommendations</a></li>
                    <li class="nav-item"><a class="nav-link {% if active_tab == 'contact' %}active{% endif %}"
                            href="{% url 'contact' %}">Contact</a></li>
                </ul>
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-light" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
    {% block content %}
    {% endblock %}
    <footer class="py-3 bg-grey">
        <p class="m-0 text-dark text-center ">Copyright &copy; Life With Vicky</p>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
        crossorigin="anonymous"></script>
</body>

</html>

模板内容只是因为我正在使用django进行此操作。

main.css：

@font-face {
    font-family: 'vi-my-ha-hoa';
    src: url('../fonts/vi-my-ha-hoa.ttf') format("truetype");
}

.navbar-brand {
    font-family: 'vi-my-ha-hoa';
    font-size: 3rem;
    word-spacing: 0.4rem;
}

.carousel-image {
    height: 400px;
    object-fit: cover !important;
}

.carousel-item>div {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.navbar-dark {
    --bs-navbar-color: #ffffff;
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #fff;
}

原文

I am trying to make a Navbar in Bootstrap 5. I would like to have the Logo (In my case this is just some fancy text) on the left. I would then like the menu centered and my search field on the right. The issue I seem to be having is when I have managed to get them lined up like this, the menu is going in the center of the search and logo divs, which due to logo size etc hasn't necessarily been the middle of my screen like I want. I have been at it for days trying different things on her but just can't seem to get it right. I also want the mobile menu to collapse and include the search. The mobile menu should then have the logo aligned in the center and the collapse button just below it also centered.

The latest code I have tried is this:

index.html:

{% load static %}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %}Life With Vicky</title>
    <meta name="description" content="{% block meta_description %}{%endblock %}">
    {% block canonical %}{%endblock %}
    {% block opengraph %}{%endblock %}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" type='text/css' href="{% static 'css/main.css' %}">
</head>

<body>
    <nav class="navbar navbar-dark navbar-expand-md py-3 w-100" style="background-color:#FCC1C5">
        <div class="container-fluid">
            <a class="navbar-brand d-flex align-items-center" href="{% url 'home' %}">
                <span>
                    Life With Vicky
                </span>
            </a>
            <button class="navbar-toggler ml-auto" data-bs-toggle="collapse" data-bs-target="#navcol-6"><span
                    class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div id="navcol-6" class="collapse navbar-collapse flex-grow-0 order-md-first">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item"><a class="nav-link {% if active_tab == 'home' %}active{% endif %}"
                            href="{% url 'home' %}">Home</a></li>
                    <li class="nav-item"><a class="nav-link {% if active_tab == 'blog' %}active{% endif %}"
                            href="{% url 'blog' %}">Blog</a></li>
                    <li class="nav-item"><a class="nav-link {% if active_tab == 'about' %}active{% endif %}"
                            href="{% url 'about' %}">About</a></li>
                    <li class="nav-item"><a class="nav-link {% if active_tab == 'recommendations' %}active{% endif %}"
                            href="{% url 'recommendations' %}">Recommendations</a></li>
                    <li class="nav-item"><a class="nav-link {% if active_tab == 'contact' %}active{% endif %}"
                            href="{% url 'contact' %}">Contact</a></li>
                </ul>
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-light" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
    {% block content %}
    {% endblock %}
    <footer class="py-3 bg-grey">
        <p class="m-0 text-dark text-center ">Copyright © Life With Vicky</p>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
        crossorigin="anonymous"></script>
</body>

</html>

The templating stuff is just because I am doing this with Django.

main.css:

@font-face {
    font-family: 'vi-my-ha-hoa';
    src: url('../fonts/vi-my-ha-hoa.ttf') format("truetype");
}

.navbar-brand {
    font-family: 'vi-my-ha-hoa';
    font-size: 3rem;
    word-spacing: 0.4rem;
}

.carousel-image {
    height: 400px;
    object-fit: cover !important;
}

.carousel-item>div {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.navbar-dark {
    --bs-navbar-color: #ffffff;
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #fff;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

多情出卖 2025-02-16 07:50:07

我还没有找到一种令人满意的简便方法来拥有一个真正的纳维栏。我希望Bootstrap提供默认的方法。以下是一种方法，它通过定义左右对齐元素与“ col”类（Flex-Basis成长）并独自离开中心的方法，该方法是根据当侧面物品具有不同的宽度时，将中间物品保持为中心。但是，Navbar品牌与其他一切崩溃。（请参阅Codepen实施： https://codepen.io/sam-miller/sam-miller-the-po- -flexboxer/pen/bglmxzz ）。对于其他可能更灵活的方法，包括使用绝对定位中心，请参见 https://codepen.io// YesiamRocks/pen/mvowxz 。这些示例使用Bootstrap 4，因此您可能必须将某些类名称更新为Bootstrap 5。结束）和MS-AUTO（保证金开始）

  <nav class="navbar navbar-expand-sm bg-light">
     <div class="container-xxl">
      <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerflex-1" aria-controls="navbarTogglerflex-1" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse align-items-baseline" id="navbarTogglerflex-1">
        <div class="col">
          <a class="navbar-brand" href="#">
            <i class="bi bi-bootstrap-fill h2 align-middle"></i>
            Bootstrap
          </a>
        </div>
        <ul class="navbar-nav mb-2 mb-sm-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown link
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <div class="col">
          <form class="ms-sm-auto w-75 " role="search">
            <div class="input-group input-group-sm mb-3 flex-nowrap">
              <input type="text" class="form-control" placeholder="Search">
              <button type="button" class="btn btn-secondary">
                <i class="bi bi-search"></i>
                <span class="visually-hidden">Search</span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </nav>

I haven't found a satisfactory easy way to have a truly centered navbar. I wish bootstrap provided a default way to do so. Below is an approach that works by defining the left and right aligned elements with the "col" class (flex-basis grow) and leaving the center alone, based on the answer given at Keep the middle item centered when side items have different widths. However, the navbar brand collapses with everything else. (see codepen implementation: https://codepen.io/sam-miller-the-flexboxer/pen/bGLmXzz). For other, perhaps more flexible, approaches including using absolute positioning the center, see https://codepen.io/yesiamrocks/pen/MVOWXZ . The examples use Bootstrap 4, so you may have to update some of the class names to Bootstrap 5. For example, mr-auto (margin right) and ml-auto (margin left) would have to be changed to me-auto (margin end) and ms-auto (margin start)

  <nav class="navbar navbar-expand-sm bg-light">
     <div class="container-xxl">
      <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerflex-1" aria-controls="navbarTogglerflex-1" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse align-items-baseline" id="navbarTogglerflex-1">
        <div class="col">
          <a class="navbar-brand" href="#">
            <i class="bi bi-bootstrap-fill h2 align-middle"></i>
            Bootstrap
          </a>
        </div>
        <ul class="navbar-nav mb-2 mb-sm-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown link
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <div class="col">
          <form class="ms-sm-auto w-75 " role="search">
            <div class="input-group input-group-sm mb-3 flex-nowrap">
              <input type="text" class="form-control" placeholder="Search">
              <button type="button" class="btn btn-secondary">
                <i class="bi bi-search"></i>
                <span class="visually-hidden">Search</span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </nav>

回复收藏 0 原文

~没有更多了~