html - 我的 Bootstrap 模板中的容器流体填充问题

Question

我有一个 Bootstrap 模板，我在其中使用了 bootstrap 3.3.6。在 here它工作正常。但是在我的元素中，我使用了相同的 CSS 和相同的标记代码，但我得到了空白填充。我怎么解决这个问题？

在我的元素中 Issue

.backXti {
  background: url(http://ginpass.com.mx/images/fondo_xit.jpg) no-repeat center center /cover;
}

#headerInterna {
  padding: 80px 0px;
  background: rgba(0, 0, 0, 0.5);
}

.blanco {
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row backXti">
    <div class="col-xs-12 col-sm-12 col-md-12 text-center" id="headerInterna">
      <h1 class="blanco ginFontN"><strong>Paquetes GINpass</strong></h1>
    </div>
  </div>
  <div class="row">
    <a href="/que_es_ginpass#DescuentoNomina">
      <img src="http://ginpass.com.mx/images/banner.jpg" class="img-responsive">
    </a>
  </div>
</div>

Answer 1

可以设置

width: 100%;

到这个img

<img src="http://ginpass.com.mx/images/banner.jpg" class="img-responsive">

喜欢

.container-fluid .row img {
    width: 100%;
}

.backXti {
  background: url(http://ginpass.com.mx/images/fondo_xit.jpg) no-repeat center center /cover;
}

#headerInterna {
  padding: 80px 0px;
  background: rgba(0, 0, 0, 0.5);
}

.blanco {
  color: #fff;
}

.container-fluid .row img {
    width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row backXti">
    <div class="col-xs-12 col-sm-12 col-md-12 text-center" id="headerInterna">
      <h1 class="blanco ginFontN"><strong>Paquetes GINpass</strong></h1>
    </div>
  </div>
  <div class="row">
    <a href="/que_es_ginpass#DescuentoNomina">
      <img src="http://ginpass.com.mx/images/banner.jpg" class="img-responsive">
    </a>
  </div>
</div>