导航栏容器是流动的，但它仍然没有全宽？答案

【问题标题】：Navbar container is fluid but still it does not have full width?导航栏容器是流动的，但它仍然没有全宽？
【发布时间】：2018-07-12 16:59:48
【问题描述】：

我制作了导航栏，但它没有全宽。右上角还有一些空间（见截图）

Navbar.js：

import React, { Component } from 'react';
import './navbar.css';

class Navbar extends Component {

  render() {
    return (
      <div>
          <nav className="navbar navbar-inverse">
            <div className="container-fluid">
                <div className="navbar-header">
                  <a className="navbar-brand" href="/">Cricket App</a>
                </div>
                <ul className="nav navbar-nav">
                  <li><a href="/">Home</a></li>
                </ul>
            </div>
          </nav>
      </div>
    );
  }
}

export default Navbar;

在 Navbar.css 中我尝试了以下但仍然无法正常工作：

.navbar {
width:100%;
}

截图见右上角：

【问题讨论】：

那个顶div的目的是什么？
确保没有父级有边距等。检查body
@Xoog 在 ReactJS 中，我们必须将所有元素包装在 div 中，如果您不熟悉 reactjs，可以忽略它。
@stonerock，nav标签就够了，可以去掉div。
@stonerock 您不需要将元素包装在 div 中。只要您返回一位父母，它就可以工作

标签： css twitter-bootstrap

【解决方案1】：

您可以使用 vw 代替 %。当您使用宽度时，它将占用父母宽度的 100%。但是，当您想使用视图的宽度时，您可以

.navbar{
   width: 100vw!important;
}

【讨论】：

width:100%; 不起作用，但 width: 100vw!important; 工作正常，为什么会这样？
Vw 表示视图宽度，因此当您说 width: 100vw 时，它只会占用视图宽度的 100%，而不是父元素的 100%。