Компонент Bulma Navbar не отображается - PullRequest
Новая
       12

Компонент Bulma Navbar не отображается

0 голосов
/ 03 ноября 2018

Я читаю документы Bulma, взял пример, чтобы применить его к Codesandbox, но у NavBar есть проблема.

Я импортировал Bulma, как упомянуто в документации, скопировал код, и я полагаю, что Bulma - это только фреймворк css, поэтому не нужно добавлять js.

Примеры используемых мной разделов «Герой» можно найти более здесь

Пример с головой героя и телом героя и с панелью навигации не работает. Навбар только как вы видите пример здесь 

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import "bulma/css/bulma.css";

function App() {
  return (
    <div className="App">
      <section class="hero is-primary is-medium">
        <div class="hero-head">
          <nav class="navbar">
            <div class="container">
              <div class="navbar-brand">
                <a class="navbar-item">
                  <img
                    src="https://bulma.io/images/bulma-type-white.png"
                    alt="Logo"
                  />
                </a>
                <span
                  class="navbar-burger burger"
                  data-target="navbarMenuHeroA"
                >
                  <span />
                  <span />
                  <span />
                </span>
              </div>
              <div id="navbarMenuHeroA" class="navbar-menu">
                <div class="navbar-end">
                  <a class="navbar-item is-active">Home</a>
                  <a class="navbar-item">Examples</a>
                  <a class="navbar-item">Documentation</a>
                  <span class="navbar-item">
                    <a class="button is-primary is-inverted">
                      <span class="icon">
                        <i class="fab fa-github" />
                      </span>
                      <span>Download</span>
                    </a>
                  </span>
                </div>
              </div>
            </div>
          </nav>
        </div>

        <div class="hero-body">
          <div class="container has-text-centered">
            <h1 class="title">Title</h1>
            <h2 class="subtitle">Subtitle</h2>
          </div>
        </div>

        <div class="hero-foot">
          <nav class="tabs">
            <div class="container">
              <ul>
                <li class="is-active">
                  <a>Overview</a>
                </li>
                <li>
                  <a>Modifiers</a>
                </li>
                <li>
                  <a>Grid</a>
                </li>
                <li>
                  <a>Elements</a>
                </li>
                <li>
                  <a>Components</a>
                </li>
                <li>
                  <a>Layout</a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </section>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
...