Question

我正在尝试制作顶部栏和侧边栏。

这是我的顶级导航栏的代码：

<header>
        <nav class="navbar navbar-expand-md  fixed-top">
            <a href="#" class="navbar-left"><img src="logo.svg" /></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-right ">
                    <img src="avatar.png">
                    <li class="nav-item dropdown ">
                        <a class="nav-link ">Hello</a>

                    </li>
                </ul>

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

然后是我的侧边栏：

 <div class="container-fluid">

            <nav class="col-sm-3 col-md-2 d-none d-sm-block sidebar">
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item collapsed active" data-toggle="collapse" data-target="#home" >
                        <a class="nav-link active" href="#"> <img src="homeIcon.png" /> Home <span class="sr-only">(current)</span></a>
                    </li>
                    <ul class="sub-menu collapse " id="home">

                        <li class="nav-item "><a class="nav-link" href="#" >&nbsp;FirstMember</a></li>
                        <li class="nav-item "><a class="nav-link" href="#">&nbsp;Second</a></li>
                        <li class="nav-item "><a class="nav-link" href="#">&nbsp;Third</a></li>
                        <li class="nav-item "><a class="nav-link" href="#">&nbsp;Fourth</a></li>

                    </ul>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><img src="secondElement.png" />&nbsp;Second Element</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><img src="" />&nbsp;History</a>
                    </li>

                </ul>

            </nav>

 <app-home></app-home>

所以在app.component.html中我正在编写侧边栏和导航栏，然后是内容。

问题在于topbar ..徽标所在的位置，取整行，然后按下按钮和下一行的Hello。只插入的图像较小，但是当我将鼠标悬停在一个href中时，它就是整行。

我该如何解决这个问题？而且，侧边栏上的每个元素都有一个图像作为图标，当屏幕变小，文本被移除并且只显示图标时，是否更好，或者我是否会在较小的屏幕中将侧边栏显示为顶部的下拉列表？

我正在使用angular5和bootstrap4。这是css：

/* Move down content  */

body {
padding-top: 5.5rem;
background-color: #F4F4F4;

 }



.navbar {
background-color: #fff;
}  

.nav.nav-link a {
color: #;
}


.sidebar {
position: fixed;
top: 69px;
bottom: 0;
left: 0;
z-index: 1000;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
border-right: 1px solid #eee;
background-color: #
}

.sidebar li{
padding-left: 5px;
}
.sidebar .nav {
margin-bottom: 20px;

}
.sidebar .nav-item {
width: 100%;
}
.sidebar .nav-item+.nav-item {
margin-left: 0;
}
.sidebar .nav-link {
border-radius: 0;
}
.flex-column a {
color: #fff;
}



.dropdown{
font-weight: bold;  
color:#;
}


.nav-pills .active{
 background-color: ;
 font-weight:bold;
}
.nav-pills .nav-link.active {
background-color: ;
color: #1C2058;

}

我正在使用：

angular / cli：1.5.0

Angular：5.0.1

节点：8.9.1

bootstrap：^ 4.0.0-alpha.6，

jquery：^ 3.2.1，

Answer 1

从您的示例中，您的锚点不是使用.navbar-brand而是使用.navbar-left，如果我记得的话，它是Bootstrap v3。我无法在v4文档中找到navbar-left作为类：

<a class="navbar-brand" href="#">
  <img src="logo.svg" />
</a>

您还使用nav-item进行下拉菜单，这也是错误的，应该是nav-link dropdown。我会从v4文档中获取navbar的新副本，看看它粘贴后是否有效。

如果确实如此，但在您的应用程序中不起作用可能是ViewEncapsulation所致，因此您需要确保您的样式全局可用（styles.scss）或者它们在您的navbar组件SCSS文件（navbar.component.scss或example.component.scss）

现在剩下的就是注释掉自定义CSS，直接从文档中粘贴v4导航栏的新副本而不做任何更改。这应该立即起作用。然后慢慢开始应用自定义更改，直到它从您的品牌开始中断。

导航栏中的锚标记采用整行 - 角度

1 个答案: