Boostrap响应式设计网格问题

问题描述：

我在自举4中构建了我的网站的前端。我想将我的一个页面拆分为四个背景图像，每个背景图像填充一列以便列堆栈响应移动。到目前为止，我在下面的设计中使用了background-image属性来填充每一列。尽管如此，图像并没有填满整个专栏。Boostrap响应式设计网格问题

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <div class="img img-profile-1"> 

      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="img img-profile-2" > 

      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="img img-profile-3" > 

      </div> 
     </div> 
     <div class="col-md-3 text-center"> 
      <div class="img img-profile-4"> 

      </div> 
     </div> 
    </div> 
</div>

我加入的CSS下面每一列中的股利，并获得完整的图像显示，但有一个奇怪的滚动发行和白色空间时，我让视较小。

.img-profile-1 { 
     background-image: url('../img/image.jpg') !important; 
     background-repeat: no-repeat; 
     background-position: center; 
     background-size: cover; 
     width: 100%; 
     height: 100%; 
     margin-left: -15px; 
     margin-right: -15px; 
    }

任何想法如何处理这种响应与背景图像的困境？谢谢！

你能提供一个工作的jsfiddle给定？向我们展示你卡住的地方〜谢谢 –

答

您不必添加另一个<div>的.col-md-3内部，以便给它一个背景，而是你只能给同<div>类的.img-profile-1等。

引导程序4还增加了一个很酷的类来删除每个.col之间的所有空白，它被称为.no-gutters。您可以在下面的剪辑中查看。

.img-profile-1, 
 
.img-profile-3 { 
 
     background-image: url('http://placehold.it/500/aaaaaa/000000'); 
 
     background-repeat: no-repeat; 
 
     background-position: center; 
 
     background-size: cover; 
 
     height: 300px; 
 
    } 
 
    
 

 
.img-profile-2, 
 
.img-profile-4 { 
 
     background-image: url('http://placehold.it/500/000000/ffffff'); 
 
     background-repeat: no-repeat; 
 
     background-position: center; 
 
     background-size: cover; 
 
     height: 300px; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<body> 
 
<div class="container-fluid"> 
 
    <div class="row no-gutters"> 
 
     <div class="col-md-3 img img-profile-1"> 
 
     </div> 
 
     <div class="col-md-3 img img-profile-2"> 
 
     </div> 
 
     <div class="col-md-3 img img-profile-3"> 
 
     </div> 
 
     <div class="col-md-3 text-center img img-profile-4"> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
</body>

答

相反的DIV设置宽度和高度在CSS中，尝试添加类IMG流体的形象标签。

答

这里是修复 如果添加COL-MD-3或bootstap任何其他列它采取正确的填充和15像素的左填充，使内的内容将不会覆盖整个宽度。为了覆盖全宽，我们需要用类行添加列下面的另一个DIV，使内部的内容将被用来支付全宽

固定代码如下

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3"> 
     <div class="row"> 
      <div class="img img-profile-1"> 

      </div> 
      </div> 
     </div> 
     <div class="col-md-3"> 
     <div class="row"> 
      <div class="img img-profile-2" > 
      </div> 

      </div> 
     </div> 
     <div class="col-md-3"> 
     <div class="row"> 
      <div class="img img-profile-3" > 
      </div> 
      </div> 
     </div> 
     <div class="col-md-3 text-center"> 
     <div class="row"> 
      <div class="img img-profile-4"> 
      </div> 

      </div> 
     </div> 
    </div> 
</div>

Boostrap响应式设计网格问题

相关推荐