引導休息

後刪除空格在同一行的列之間的自舉3.引導休息

如果您運行下面的HTML和CSS，的div上面768px沒有空間正確呈現。只要你達到那個斷點，div就會堆疊在一起，這非常好。但是，這個神祕的白色空間出現在兩個div之間。如果您彈出開放開發工具，則沒有任何類型的保證金或頭寸設置，並且通過媒體查詢爲第二個div設置負值保證金無濟於事。我對導致這個空白的原因感到茫然。

它幾乎看起來像第一個div粘貼到導航元素的頂部，第二個粘在底部的斷點上，但這是一個預感，我不知道該如何補救它。以下是HTML和CSS。

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Homepage</title> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/style2.css" rel="stylesheet"> 
</head> 

<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-4 brand"> 
       <h1>CruisingFree!</h1> 
      </div> 
      <div class="col-sm-8 navlinks"> 
       <p>Some more stuff</p> 
      </div> 
     </div> 
    </div> 
</body> 

</html>

而這裏的CSS：

nav { 
    height: 100%; 
} 

.brand { 
    background-color: rgba(192, 192, 192, 0.3); 
} 

.navlinks { 
    background-color: rgba(59, 128, 173, 0.5); 
    height: 69px; 
} 

.navlinks p { 
    color: white; 
    position: absolute; 
    bottom: 0; 
}

來源

2017-08-10 Joseph Giampietro

它實際上是延長了col-sm-4div的<h1>標籤的邊緣。

一種方法使用引導程序將確定在該斷裂的發生點，並刪除保證金爲h1對於使用媒體查詢來照顧它。就是這樣。

@media (max-width: 720px) { 
    .brand h1 { 
    margin: 0px; 
    } 
}

[注：我以前.brand h1這裏指的是h1，因爲這時它只會在頁面適用於特定h1標籤，而不是所有的h1標籤]

瞧：

請參閱JSFiddle。

來源

2017-08-10 05:14:11 Rithwik

請注意並標記爲正確的答案，如果它對您有幫助。謝謝。 – Rithwik

完美，謝謝！ –

回答

相關問題