我有一个带有一些lis的导航栏。我想让我的导航栏响应,当屏幕变小时,我希望它们保持可见并保持在相同位置,但是现在它们只是折叠了。如何使他们保持在同一位置?我尝试使用Bootstrap的nav类,但是没有用。这是我的组件:
<template>
<div>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<img src="/src/assets/img/logo.PNG" alt="">
<h3 class="decentralised">decentralised</h3>
<h4 class="shareholder">Shareholder management</h4>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="nav-a"> Shares Management</a>
</li>
<li>
<a href="#" class="nav-a"> Convertible Note</a>
</li>
<li>
<a href="#" class="nav-a"> Priced Round</a>
</li>
</ul>
</div>
</nav>
</div>
</template>
<style lang="scss">
@import "../../../variables";
.navbar {
background-color: $white;
box-shadow: 0px 3px 22px rgba(187, 203, 183, 0.2);
height: 90px;
.decentralised {
font-family: Roboto Slab;
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 16px;
text-transform: uppercase;
color: #818683;
}
.decentralised {
font-family: Roboto Slab;
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 16px;
text-transform: uppercase;
color: #818683;
}
.shareholder {
font-family: Roboto Slab;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 21px;
text-transform: uppercase;
color: #444a47;
}
.navbar-right {
display: flex;
flex-direction: row;
.nav-a {
padding: 77px;
font-family: Roboto Slab;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
color: #303331 !important;
text-decoration: none;
}
}
}
</style>