内联显示 ReactBootstrap 导航栏答案

【问题标题】：Display ReactBootstrap Navbar inline内联显示 ReactBootstrap 导航栏
【发布时间】：2018-09-26 13:21:19
【问题描述】：

我正在使用 react 构建一个网站，并为 Navbar 和 Carousel 应用了 Reactbootstrap。对于页脚 MdBootstrap。

我遇到的问题是我的导航栏没有内联显示，并且导航栏和轮播上左右都有填充。

有人可以帮我解决这个问题吗？

这是我的 CustomNavbar.jsx 和 CustomNavbar.css：

import React, { Component } from 'react'
import { Navbar, Nav, NavItem } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import './CustomNavbar.css'

export default class CustomNavbar extends Component {
  render() {
    return (
      <Navbar default collapseOnSelect fluid={true}>
        <Navbar.Header>
          <Navbar.Brand>
            <Link to="/">CodeLife</Link>
          </Navbar.Brand>
          <Navbar.Toggle/>
        </Navbar.Header>
        <Navbar.Collapse>

          <Nav>

            <NavItem eventKey={1} componentClass={Link} href="/" to="/">
              Home
            </NavItem>
  

            <NavItem eventKey={2} componentClass={Link} href="/about" to="/about">
              About
            </NavItem>
  
 
            <NavItem eventKey={3} componentClass={Link} href="/news" to="/news">
              News
            </NavItem>
  
          </Nav>
  
        </Navbar.Collapse>

      </Navbar>
    )
  }
}

nav.navbar, .navbar-default {
    background-color: #2892D7 !important;
    margin-bottom: 0;
    margin:0;
    padding:0;
  }
  
  .navbar-default {
    background-image: none;
    border: none;
    border-radius: 5px;
    margin:0;
    padding:0;
  }
  
  .navbar-default .navbar-nav > li > a {
    color: white;
    margin-bottom: 0;
    position: relative;
    display: block;
    margin:0;
    padding:0;
  }
  
  .navbar-default .navbar-brand {
    color: white;
    margin-bottom: 0;
    margin:0;
    padding:0;
  }
  
  .navbar-default .navbar-toggle {
    border-color: white;
    margin-bottom: 0;
    margin:0;
    padding:0;
  }
  
  .navbar-default .navbar-toggle .icon-bar {
    background-color: white;
    margin:0;
    padding:0;
  }
  
  .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent;
    margin-bottom: 0;
    margin:0;
    padding:0;
  }
  
  .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color: white;
    background-color: transparent;
    margin-bottom: 0;
    margin:0;
    padding:0;
  }
  
  .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: white;
    background-color: transparent;
    margin-bottom: 0;
    margin:0;
    padding:0;
  }

如下所示： https://imgur.com/8B13iB6

【问题讨论】：

从.navbar-default .navbar-nav > li > a 中删除display: block; 或将其更改为inline-block
我都试过了，但没有任何改变。我的一个朋友告诉我，这可能是因为我在 index.html 和 app.jsx 上有 bootstrap.min.css v3 的引用，我正在导入 bootstrap.min.css v4。我正在尝试一些没有结果的更改
你必须建立一个codepen，这样我们才能看到整个问题
不幸的是，我无法正确运行笔，但我复制粘贴了其中的代码。这里是链接codepen.io/Nico90/pen/erOpXm
我做了一些测试，发现 reactbootstrap 导航栏与 bootstrap.min.css v3 和 mdbootstrap 与 bootstrap.min.css v4 一起工作得很好。我真的不知道如何将两者都包括在内，因为它们似乎无法正常工作......

标签： reactjs react-bootstrap mdbootstrap

【解决方案1】：

试试flex-direction: row，这似乎是唯一适合我的解决方案。

【讨论】：