引导休息

后删除空格在同一行的列之间的自举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

完美，谢谢！ –

回答

相关问题