Question

我正在使用引导程序4。我想复制此页面的设计：

https://www.stickermule.com/custom-stickers

对于一个更清晰的想法，我使用红色bg来说明我需要的东西。

我可以将导航栏项目的背景颜色更改为红色，但是顶部和底部之间有一个间隙。

我该如何解决？

CSS代码：

password-phrase

代码：

li.nav-item:hover {
  background-color: red;
}

更新1：

仅当添加nav标签时，解决方案才有效：

<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">

        <div class="col-md-8">
            <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>
                <!--<li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">Dropdown</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown01">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>-->


            </ul>
        </div>
        <div class="col-md-4">

            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="glyphicon glyphicon-globe"></a>
                </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>
        <!--<form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        -->
    </div>
</nav>

不只是：

nav.navbar {padding: 0 1rem;}

为什么？

我正在这样调用我的css文件：

.navbar {padding: 0 1rem;}

头部内容：

<link href="{% static 'gallito_app/style.css' %}" rel="stylesheet">

Answer 1

这也会更改导航栏的高度

.navbar {padding: 0 1rem;}

如果要保持相同的高度，请添加

.navbar .nav-item{padding:1rem 1rem}

更改全高导航栏项目背景颜色

1 个答案: