如何填充整个宽度（React.js）？答案

【问题标题】：How to fill the entire width (React.js)?如何填充整个宽度（React.js）？
【发布时间】：2017-04-13 19:00:37
【问题描述】：

我是 React.js 的新手，我注意到的第一件事是页面的整个宽度没有被填充。这是我的 JS 代码：

var Navbar = React.createClass({
    render: function(){
        return(
            <div className="navbar"> </div>
        );
    }
});

ReactDOM.render( <Navbar/>,document.getElementById('test') );

还有 CSS：

.navbar{
    background-color: green;
    width: 100%;
    height: 3em;
}

顶部、左侧、右侧有 3px 的意外边距。

【问题讨论】：

正文或#test 元素有填充？测试是什么样的？
1) 正文。 2) 测试看起来像一个导航栏，但顶部、左侧、右侧边距各为 3px。

标签： reactjs width

【解决方案1】：

只需在 index.html 页面中执行此操作

<body style="margin: 0px;">

【讨论】：

【解决方案2】：

你的身体要么有边距，要么有内边距。您可以删除，但它会与您想要填充的页面的其他区域变得混乱。另一种选择是您可以固定导航栏位置。这将忽略填充/边距。

.navbar{
  position: fixed;
  top: 0;
  left: 0;
  background-color: green;
  width: 100%;
  height: 3em;
}

http://codepen.io/finalfreq/pen/VKPXoN

【讨论】：

工作，非常感谢！删除正文的边距或填充有什么问题？
这并没有什么问题，但是如果您希望您的内容与页面外部有一定的距离，您将必须有一个 div 包装您的所有内容，以设置填充而不是仅仅做它在已经存在并覆盖一切的身体上