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

Question

我是 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;
}

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

Answer 1

您的 body 有边距或填充。您可以删除，但随后它会弄乱您想要均匀填充的页面的其他区域。另一种选择是您可以固定导航栏位置。这将忽略 padding/margin。

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

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

Answer 2

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

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

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

How to fill the entire width (React.js)?

width

reactjs