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

Question

首先，我的 FE 技能非常基础，如果这是一个愚蠢的问题，请提前道歉...

我正在尝试创建一个基本的博客页面，但我在内容 div 和 post 链接 div 的布局方面遇到了问题。我希望它们并排浮动，以便它们彼此之间、侧面和 header/footer.

之间有一定的距离

我为此使用了 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 的样式

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

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

trouble using react-bootstrap for grid layout

css

reactjs

react-bootstrap