2017-11-11 64 views
0

我仍然是JavaScript中的新成员,尤其是在reactjs中。创建网页标题时遇到问题。我想把菜单放在右边,然后我使用。但它不起作用,菜单停留在左侧。我正在使用布尔玛为CSS。谁能帮忙?标签navbar在Reactjs中不起作用

import React, { Component } from 'react'; 
import './Header.css'; 
import { Link } from 'react-router-dom'; 

class Header extends Component { 

    render() { 
    return (
     <div className="nav has-shadow"> 
     <div className="container"> 
     <div className="nav-left"> 
      <a className="nav-item">MyCompany</a> 
     </div> 

     <span className="nav-toggle" > 
      <span></span> 
      <span></span> 
      <span></span> 
     </span> 

     <div className="nav-right nav-menu"> 

      <Link to="/" className="nav-item r-item">Home</Link> 
      <Link to="/faq" className="nav-item r-item">Features</Link> 
      <Link to="/faq" className="nav-item r-item">About</Link> 
      <Link to="/faq" className="nav-item r-item">faq</Link> 



      <div className="nav-item"> 
      <p className="control"> 
       <a className="button is-primary is-outlined"> 
       <span className="icon"> 
        <i className="fa fa-download"></i> 
       </span> 
       <span>Join Now</span> 
       </a> 
      </p> 
      </div> 

     </div> 
     </div> 
    </div> 

    ); 
    } 
} 

export default Header; 

回答

0

使用navbar-end类来把你的菜单内容右侧像

<nav class="navbar"> 
    <div class="navbar-end"> 
     <div class="navbar-item"> 
      <!-- Your content here --> 
     </div> 
    </div> 
</nav> 

对于有关文档的页眉/导航栏在布尔玛CSS参考Navbar | Bulma

+1

谢谢!只需使用即可将菜单放在右侧,并且可以正常工作。 –