Question

我在javascript中仍然是新手，特别是在reactjs中。我在创建Web标题时遇到问题。我想把菜单放在右边，我用。但它不起作用，菜单保持在左侧。我正在使用bulma for css。有人可以帮忙吗？

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;

Answer 1

使用navbar-end课程将您的菜单内容放在右侧，如

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

有关Bulma CSS中标题/导航栏的文档，请参阅Navbar | Bulma

标签导航栏在Reactjs中不起作用

1 个答案: