Question

首先，如果这是一个愚蠢的问题，我的FE技能非常基本，所以很抱歉...

我正在尝试创建一个基本的博客页面，我遇到了内容div和帖子链接div的布局问题。我希望它们能够并排漂浮，以便它们彼此之间，边缘和页眉/页脚都有一个边距。

我正在使用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标记是侧边栏看起来在顶部有边距的原因。尝试使用h2

设置margin-top: 0;的样式

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

使用react-bootstrap进行网格布局时出现问题

1 个答案: