时间戳

首页 > 解决方案 > 如何在引导程序中为我的顶部导航栏添加徽标容器和水平分隔线？

javascript - 如何在引导程序中为我的顶部导航栏添加徽标容器和水平分隔线？

问题描述

我正在尝试创建一个顶部导航栏，其左侧有一个颜色为 #1 的徽标作为背景。然后，它被一个灰色的水平分隔线分隔，然后你有颜色#2，应用程序名称位于分隔线旁边。我试图做到这一点，但我只能获得徽标和单个顶部导航背景颜色。我无法找到划分导航栏的方法。

HTML：

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">

</head>




<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img alt="My Logo" src="my-logo-png-transparent.png">
                </a>
            </div>
        </div>
    </nav>



</body>


<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>
<script src="dashboard_static/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>





</html>

CSS：

nav {
    background: #282829;
    border-bottom: 2px solid #999999;;
}

img {
    height: 27.5px;
    width: 23.6px;
}

标签： javascripthtmlcss

解决方案

你的意思是这样的：

索引.html

 <nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header nav-logo">
            <a class="navbar-brand" href="#">
                <img alt="My Logo" src="https://via.placeholder.com/30/">
            </a>
            <span>NAME</span>

        </div>
    </div>
</nav>

样式.css

.navbar {
background: blue;
border-bottom: 2px solid #999999;
padding: 0px;
}
.container-fluid{
padding: 0px;
}
.navbar-brand {
background: red;
border-right: 2px solid grey;
padding: 20px 30px;
}

推荐阅读