css - 使用 react-bootstrap 进行网格布局时遇到问题

Question

首先，我的 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 代码中使用任何内联样式。

我错过了什么？

Answer 1

两列都没有边距。浏览器为 HTML 标题标签提供边距。在您的情况下，侧边栏的 h2 标记是侧边栏看起来顶部有边距的原因。尝试使用 margin-top: 0;

设置 h2 的样式

您应该向 .row 或 .container 添加 margin-top 样式。希望这对您有所帮助!