Bootstrap约束宽div包含在div

我使用Bootstrap使用图像和文本和略微不透明的径向渐变悬停进行页面导航。我遇到的问题是悬停比它坐落的图像稍宽，所以我在悬停时图像的左侧和右侧留下了细灰条。我在全屏时设法让它看起来很好，但是如果我调整页面大小，它会再次出现。

这里的HTML：

<div class="row"> 
    <div class="col-xs-4 subnav" id="subnav1"> 
    <a href="#bands"> 
     <img src="_images/_thumbnails/niki_01_t.jpg" /> 
     <div id="subnav-overlay1" class="subnav-overlay"> 
     <h3 class="subnav-text" id="subnav-text1">BANDS</h3> 
     </div> 
    </a> 
    </div> 
    <div class="col-xs-4 subnav" id="subnav2"> 
    <a href="#portraits"> 
     <img id="subnav-image2" src="_images/_thumbnails/terence_03_t.jpg" /> 
     <div id="subnav-overlay2" class="subnav-overlay"> 
     <h3 class="subnav-text" id="subnav-text2">PORTRAITS</h3> 
     </div> 
    </a> 
    </div> 
    <div class="col-xs-4 subnav" id="subnav3"> 
    <a href="#products"> 
     <img src="_images/_thumbnails/bp_2_t.jpg" /> 
     <div id="subnav-overlay3" class="subnav-overlay"> 
     <h3 class="subnav-text" id="subnav-text3">PRODUCTS</h3> 
     </div 
    </a> 
    </div> 
</div>

而CSS：

.subnav { 
    display: block; 
    position: relative; 
    overflow: hidden; 
} 
.subnav img { 
    width:100%; 
    height:100%; 
    overflow:hidden; 
} 
.subnav a { 
    display: inline-block; 
    max-width: 100%; 
    max-height: 100%; 
} 
.subnav h3 { 
    display: none; 
    font-size: 2em; 
    font-weight: 700; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
.subnav-overlay { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    overflow: hidden; 
    background:rgba(0, 0, 0, 0.5); 
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */ 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    display:none; 
    padding-right: -15px; 
    padding-left: -15px; 
}

Here's a screenshot

来源

2017-03-19 Hunter Boen

.subnav-overlay出现的悬停？如果是这样，你有没有尝试删除左侧和右侧的负填充？ –

我添加了左右负填充以尝试更正此问题。没有它就没有变化。 –

是否有更多的CSS可以添加到您的示例中？也许是悬停状态，以及你在桌面上做什么以在subnav/columns之间添加空格 –

添加position:relative您<a>

.subnav a { 
    position:relative; 
    display: inline-block; 
    max-width: 100%; 
    max-height: 100%; 
}

原因是 - 叠加层的绝对定位不会坚持相对定位的Bootstrap列的填充，它带有额外的15px填充。相对于你的<a>这是在填充密闭的位置加入，你保持绝对覆盖的<a>

Codepen

注意的尺寸范围内，上面我改变了列类col-md-4，但应该不适合你。

来源

2017-03-19 17:19:28

解决！感谢您的帮助Stu！ –

@HunterBoen你应该接受答案，如果它解决了你的问题:) – Christopher

Bootstrap约束宽div包含在div

回答

相关问题