Question

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

在我的项目 Issue

中

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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>

Answer 2

在这个模板中它有：

.row {
     width: 100%;
} 
.row {
     margin-left: -15px;
     margin-right: -15px;
}

如果我移除width的{{1}}，那么它就完美无缺。

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

2 个答案: