Question

我需要有一个导航栏，该导航栏的右边和左边都有元素。

我可以正常工作了，但是左侧的项目（注册，登录到左侧）没有位于最左侧。

如何实现类似于此页面的功能？

https://www.stickermule.com/

期望结果：

我所拥有的：

代码：

<nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-bg">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">


            <ul class="navbar-nav mr-auto">

                <li class="nav-item active">
                    <a class="nav-link" href="#">Stickers <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Etiquetas</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Magnetos</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Pines</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Pines</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Empaques</a>
                </li>
            </ul>



            <ul class="navbar-nav mr-auto navbar-right">
                <li class="nav-item active">
                    <span class="glyphicon glyphicon-globe"></span>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">LogIn</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Registro</a>
                </li>
            </ul>


    </div>
</nav>

奖金：

我正在尝试将gliphycon图标渲染为导航项目，但它不会显示在导航栏中。为什么？

Answer 1

使用一些错误的类名来看看Bootstrap 4 documentation on navbars。检查其余部分，以更好地了解引导功能。 Bootstrap 4在很多方面与Bootstrap 3不同。您使用了一些在新版本中不起作用的类。再说一遍：检查文档：）
请记住，只有1个nav-item元素也应该具有类active。

About the icons：

Bootstrap默认情况下不包括图标库，但是我们有一些建议供您选择。尽管大多数图标集都包含多种文件格式，但我们更喜欢SVG实现，因为它们具有更好的可访问性和矢量支持。

我在这里使用了FontAwsome

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-md fixed-top bg-dark navbar-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">


            <ul class="navbar-nav">

                <li class="nav-item active">
                    <a class="nav-link" href="#">Stickers <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Etiquetas</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Magnetos</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pines</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pines</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Empaques</a>
                </li>
            </ul>



            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link"><i class="fas fa-shopping-cart"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">LogIn</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Registro</a>
                </li>
            </ul>


    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

展开导航栏项目以占据全宽

1 个答案: