ブートストラップは、ブートストラップ3</p> <p>で休憩

後に同じ行の列の間の空白を削除しますが、以下のHTMLとCSSを実行した場合、div要素が768px以上のスペースなしで正しくレンダリングされます。そのブレークポイントに達するとすぐに、divは互いに重なり合っています。これは完璧です。しかし、2つの部門の間に現れるこの神秘的な白いスペースがあります。デベロッパーツールを開くと、マージンや位置の設定はありません。また、2番目のdivのメディアクエリで負のマージンを設定しても効果はありません。私はこの白いスペースを正確に引き起こしているところで迷っています。ブートストラップは、ブートストラップ3</p> <p>で休憩

ほとんどの場合、最初のdivがnav要素の上端に貼り付けられ、2番目の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; 
    } 
}

[注：私は、それが唯一のページですべてのh1のタグをその特定のh1タグに適用されませんので、h1を参照するために、ここで.brand h1を使用。]

出来上がりを：

JSFiddleを参照してください。

出典

2017-08-10 05:14:11 Rithwik

お手伝いがあれば、正解とマークしてください。ありがとう。 – Rithwik

完璧、ありがとう！ –

ブートストラップは、ブートストラップ3</p> <p>で休憩

答えて

関連する問題