首先,我的 FE 技能非常基础,如果这是一个愚蠢的问题,请提前道歉...
我正在尝试创建一个基本的博客页面,但我在内容 div 和帖子链接 div 的布局方面遇到了问题。我希望它们并排 float ,以便它们彼此之间、两侧和页眉/页脚之间有一个边距。
我为此使用了 react-bootstrap,它有点管用,但我不明白为什么内容 div 与顶部没有边距,而侧边栏 div 有......
这是我的网站:https://tal-joffe.github.io/blog (忽略我刚开始的难看的颜色和字体:))
这是包含两个 div 的组件:
const PostsTab = () => (
<div className="post-tab">
<Grid>
<Row>
<Col md={8}>
<ContentContainer/>
</Col>
<Col md={4}>
<VisiblePostsList/>
</Col>
</Row>
</Grid>
</div>
)
这是我在容器和主体上的内部组件的 css:
.side-bar {
background-color: gray;
min-height: 800px;
}
.post-content{
background-color: #efefef;
min-height: 800px;
}
body {
font-family: sans-serif;
background-color: aquamarine;
overflow: auto;
}
没有其他全局 css 代码,我也没有在 javascript 代码中使用任何内联样式。
我错过了什么?
最佳答案
两列都没有边距。浏览器为 HTML 标题标签提供边距。在您的情况下,侧边栏的 h2
标记是侧边栏看起来顶部有边距的原因。尝试使用 margin-top: 0;
h2
的样式
您应该向 .row
或 .container
添加 margin-top 样式。希望这对您有所帮助!
关于css - 使用 react-bootstrap 进行网格布局时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45130204/