2017-11-11 6 views
0

私はまだreactjsのjavascriptでまだ新しいです。 Webヘッダを作成する際に問題があります。私は右のメニューを入れたいと思います。しかし、それは動作しません、メニューは左にとどまります。私はcssのためにbulmaを使用しています。誰も助けることができますか?ブルマCSSでヘッダー/ナビゲーションバーのマニュアルについてタグnavbarはReactjsで動作しません

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

のようなあなたのメニューの内容右側に配置する

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クラスNavbar | Bulma

+1

感謝を参照してください!単にを使用してメニューを右側に置くと動作します。 –

関連する問題