如何让 react-burger-menu 与引导网格一起使用？

Question

我正在尝试将 react-burger-menu 与 bootstrap 3 网格一起使用。我想在页面顶部有一行，左上角有汉堡菜单，该行的其余部分包含页面标题，所以我写道：

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>
    )
  }
}

但我得到的是：

我以为我会使用引导网格来布置水平间距，但它不起作用。有没有办法做到这一点，或者我应该使用引导网格以外的东西？ TIA。

Answer 1

看起来 h1 类正在应用一些覆盖 col 行为的属性。除了col-lg-2 之外，您还可能需要添加col 类，这样<div className='col col-lg-2'

试试：

<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>

最后，确保你的 col 大小是正确的。尝试从 md 开始。示例：<div className='col-md-2'></div>