樣式不適用於反應引導導航欄

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

這樣嘗試

HTML

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/>

CSS

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

Answer 2

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;
}

Answer 3

Firstly you should install bootstrap npm then include the index.js page. if you import bootstrap in the index.jsx page.All components `enter code here` got style



import  'bootstrap/dist/css/bootstrap.css'; in the index.js page

npm install: npm i bootstrap@versionname or npm i bootstrap