内联显示ReactBootstrap Navbar [英] Display ReactBootstrap Navbar inline

问题描述

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

I am building a Website with react and I applied Reactbootstrap for Navbar and Carousel. For Footer MdBootstrap.

我遇到的问题是，导航栏未内嵌显示，并且导航栏和转盘上有左右空白.

I get the Problem that my Navbar is not displayed inline and there is a padding right and left on navbar and Carousel.

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

Could someone please help me to fix that?

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

Here my CustomNavbar.jsx and 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

推荐答案

尝试flex-direction: row，它似乎是唯一适用于我的解决方案.

Try flex-direction: row, it seems to be the only solution that works for me.

这篇关于内联显示ReactBootstrap Navbar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！