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代码：

try:
   membership = Membership.objects.get(membership_type='Free')
catch Membership.DoesNotExist:
   membership = ....<create it or set None>...

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

样式不适用于反应引导导航栏

3 个答案: