css - 样式不适用于 react 引导导航栏

Question

我正在尝试在 React 元素中设计响应式 NavBar，但样式不适用于它。我错过了一些进口商品吗？这是一个简单的问题，但它落后于我的工作

import 'bootstrap/dist/css/bootstrap.css'
<nav className='navbar navbar-default'>
     <div class='navbar-header'>
          <img src={pic} className='pic' />
     </div>
     <ul className='nav navbar-nav'>
          <li><Link to='/' style={{ textDecoration: 'none', color: '#5B5454', fontSize: '20px' }}>Home</Link></li>
          <li><Link to='/src/Header/Problem.js' style={{ textDecoration: 'none', color: '#5B5454', fontSize: '20px' }} >Problem</Link></li>
     <ul/>
<nav/>

.nav navbar-nav
{
        list-style-type: none;
        margin: 0px;
        float: right;
        position: relative;
        right: 20px;
        top: 85px; 
        left: 10px;
        padding: 10px;
        width: 83%; 
}
.nav navbar-nav li
{
      position: relative;
      margin-left:30px;
      right:10px;
      display: inline-block;
      font-family: 'Ubuntu',sans-serif;
}

Answer 1

nav 和 navbar-nav 都是给 div 的类，所以你应该使用下面的 CSS 代码:

.nav.navbar-nav
{
        list-style-type: none;
        margin: 0px;
        float: right;
        position: relative;
        right: 20px;
        top: 85px; 
        left: 10px;
        padding: 10px;
        width: 83%; 
}
.nav.navbar-nav li
{
      position: relative;
      margin-left:30px;
      right:10px;
      display: inline-block;
      font-family: 'Ubuntu',sans-serif;
}