时间戳

首页 > 解决方案 > Bootstrap NavBar 对齐（3 列和响应式菜单）

html - Bootstrap NavBar 对齐（3 列和响应式菜单）

问题描述

我基本上有一个非常简单的问题，但如果我能做这个简单的补充，我的作品集会更好看。

我希望引导程序中的 NavBar 位于 3 列中，基本上就像我在下面模拟的图像一样。

我需要什么的基本概念。

我目前有基本的引导导航栏设置，默认代码如下：

<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-white fixed-top">
  <div class="container">

    <a class="nav-link" href="#">my name goes here</a>      

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link" href="#">about</a></li>
        <li class="nav-item"><a class="nav-link" href="#">resume</a></li>
      </ul>
    </div>

  </div>
</nav>

我可以用填充和东西弄乱一个奇怪的版本，但我不想要那个。对我来说最难的部分是理解响应式版本，将左侧的一个链接（工作）和右侧的两个链接（关于、恢复）合并到一个下拉导航中，并让“我的名字在这里”成为标题在手机上面。

任何帮助，或正确方向的一点都会很棒。

此外，可以假设我的 CSS 是基本引导 CSS。

谢谢

更新

<!-- Navigation -->
<nav class="navbar navbar-light navbar-expand-md bg-success justify-content-between">
<div class="container-fluid">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse dual-nav w-50 order-1 order-md-0">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link pl-0" href="#">work <span class="sr-only">work</span></a>
            </li>
        </ul>
    </div>
    <a href="/" class="navbar-brand mx-auto d-block text-center order-0 order-md-1 w-25">Colin Grant</a>
    <div class="navbar-collapse collapse dual-nav w-50 order-2">
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="">about</a></li>
            <li class="nav-item"><a class="nav-link" href="">resume</a></li>
        </ul>
    </div>
</div>

这似乎工作得很好，有什么更好的建议吗？

谢谢

标签： htmlcsstwitter-bootstrap-3css-positionnavbar

解决方案

以下是我使用 bootstrap 4 的方法。当屏幕尺寸为 <992px 时，导航栏的右侧将折叠成一个按钮。

<nav class="navbar navbar-expand-lg navbar-dark bg_color_primary sticky-top d-flex justify-content-between ">

    <div class="navbar-nav  col-4 align-items-start ">
        <div class="text-white bg_color_primary_light  rounded-circle p-2">
            Work
        </div>
    </div>

    <div class="col-4  d-flex justify-content-center">
        <a class="navbar-brand text-white brand_name   " href="">
            BrandName
        </a>
    </div>

    <button class="  navbar-toggler ml-auto  align-items-end" type="button" data-toggle="collapse"
            data-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse  col-4 " id="navbarNavDropdown">
        <div class="navbar-nav ml-auto ">
            <a class="nav-item nav-link" href="">About</a>
            <a class="nav-item nav-link" href="">Resume</a>
        </div>
    </div>

</nav>

推荐阅读