jquery - Bootstrap 约束宽度 div 包含在 div 中

Question

已解决

我正在使用 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

Answer 1

添加position:relative给你的<a>

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

原因是 - 叠加层的绝对定位不会遵循相对定位的 Bootstrap 列的填充，它带有额外的 15px 填充。通过添加相对于您的 <a> 的位置它被限制在填充中，您将绝对覆盖保持在 <a> 的大小内

Codepen

请注意，上面我将列类更改为 col-md-4 ，但这与您无关。