麻煩

Question

首先，我FE技能是很基本很抱歉前期，如果這一個愚蠢的問題...

我試圖創建一個基本的博客頁面，我有內容div和帖子鏈接div的佈局有問題。我希望他們並排漂浮，讓他們彼此之間有邊距，側邊和頁眉/頁腳。

我使用的反應，引導爲和它那種工作，但我想不通，爲什麼內容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我有對內部組件容器和body：

.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標籤是側邊欄看起來像它頂部有邊距的原因。嘗試的造型與h2margin-top: 0;

你應該在邊距樣式添加到.row或.container。希望這可以幫助！