Bootstrap 边空白
Bootstrap sides whitespace
当屏幕分辨率太大时,我在修复网站两侧的空白时遇到了一些问题(我正在使用背景图片)。在浏览器中使用开发工具确实有一些填充和边距会影响我的页眉和页脚,但简单地执行 padding-left: 0
和 padding-right: 0
是行不通的,甚至 !important
也行不通。我认为这与 Bootstrap 的 row
class.
有关
header {
height: 708px;
background-image: url("Images/hero.png");
background-position: top;
background-repeat: no-repeat;
text-align: center;
color: #22292B;
font-family: Windlass;
padding-top: 13em;
}
<header class="container-fluid">
<div class="row">
<div class="col-xs-12 hero-bg">
<h1>
<b>THE PIRATES</b>
</h1>
<h3>El Mar Caribe del Siglo XVII como nunca lo habías experimentado</h3>
</div>
<div class="col-xs-5 center-block" id="flecha-container">
<img src="Images/arrow.png" alt="flecha" id="flecha">
</div>
</div>
</header>
这里是 link 网站:www.davidliu。co/thepirates/
如有任何帮助,我们将不胜感激。谢谢!
我不确定我明白你想做什么,但如果你只是想删除两边和你的 header background-image 之间的空白,只需添加:
background-size: cover;
希望对您有所帮助!
当屏幕分辨率太大时,我在修复网站两侧的空白时遇到了一些问题(我正在使用背景图片)。在浏览器中使用开发工具确实有一些填充和边距会影响我的页眉和页脚,但简单地执行 padding-left: 0
和 padding-right: 0
是行不通的,甚至 !important
也行不通。我认为这与 Bootstrap 的 row
class.
header {
height: 708px;
background-image: url("Images/hero.png");
background-position: top;
background-repeat: no-repeat;
text-align: center;
color: #22292B;
font-family: Windlass;
padding-top: 13em;
}
<header class="container-fluid">
<div class="row">
<div class="col-xs-12 hero-bg">
<h1>
<b>THE PIRATES</b>
</h1>
<h3>El Mar Caribe del Siglo XVII como nunca lo habías experimentado</h3>
</div>
<div class="col-xs-5 center-block" id="flecha-container">
<img src="Images/arrow.png" alt="flecha" id="flecha">
</div>
</div>
</header>
这里是 link 网站:www.davidliu。co/thepirates/
如有任何帮助,我们将不胜感激。谢谢!
我不确定我明白你想做什么,但如果你只是想删除两边和你的 header background-image 之间的空白,只需添加:
background-size: cover;
希望对您有所帮助!