css - 如何防止li的内部导航栏崩溃
问题描述
我有一个导航栏,里面有一些 lis。我想让我的导航栏响应,当屏幕变小时,我希望它们保持可见并处于相同的位置,但现在它们只是崩溃了。我怎样才能让他们保持在同一个位置?我尝试使用 Bootstrap 的导航类,但它没有用。这是我的组件:
<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>
解决方案
推荐阅读
- r - 向量中的 ifelse() 和 paste0()
- javascript - ES6 检测函数是否在类实例的原型链上
- c - 如果没有用 minicom 打开一次,则无法从串口读取
- javascript - 在 rxjs 中选择重复列表的最后一项
- python-3.x - Zabbix API 3.4 - 由于循环要求而无法创建主机
- bash - 子shell进程无法访问父shell中定义的变量和函数
- ember.js - 如何在使用 Ember.set 设置之前修剪数据
- javascript - Firebase storage.object().onChange 现在已弃用,
- runtime-error - 如何在 Perl 中导致“无法刷新标准输出:管道损坏”?
- javascript - 尝试添加自定义 Flaticon 图标