如何使react-burger-menu与Bootstrap网格一起使用？

Question

I'm trying to use react-burger-menu with bootstrap 3 grids. I want to have a row across the top of my page that has the burger menu in the upper left corner with the remainder of the row containing a page title, so I wrote:

import React from 'react'
import { slide as ReactMenu } from 'react-burger-menu'

export default class Header extends React.Component {

  showAbout(event) {
    event.preventDefault()
    console.log("Version 0.0.1")
  }

  render() {
    return(
      <div className="container">
        <div className="row">
          <div className="col-lg-2">
            <ReactMenu>
              <a id="View" className="menu-item" href="/">View</a>
              <a onClick={ this.showAbout } className="menu-item--small" href="">About</a>
            </ReactMenu>
          </div>
          <div className="col-lg-10 h1">Permit and License Documents</div>
        </div>
      </div>
    )
  }
}

But what I get is:

I thought I would use bootstrap grid to layout the horizontal spacing, but it is not working. Is there a way to do this, or should I use something other than bootstrap Grids? TIA.

Answer 1

It looks like that h1 class is applying some property that's overriding the col behavior. It is also possible that you need to add the col class in addition to the col-lg-2 such that <div className='col col-lg-2'

Try:

<div className="container">
        <div className="row">
          <div className="col col-lg-2">
            <ReactMenu>
              <a id="View" className="menu-item" href="/">View</a>
              <a onClick={ this.showAbout } className="menu-item--small" href="">About</a>
            </ReactMenu>
          </div>
// change here:
          <div className="col col-lg-10">
            <h1>Permit and License Documents</h1>
          </div>
        </div>
      </div>

Finally, make sure that you're col size is correct. try making it from md up. Example: <div className='col-md-2'></div>