拉伸图像，以适应完整的容器宽度引导

我有一个1300像素宽的图像，使用引导我想这个图像填充我的容器设置为1300px的全宽度。我创建一个行，给它一个完整的12列，然后在图像中添加一类图像响应。有了这个设置，我得到了下面的输出。拉伸图像，以适应完整的容器宽度引导

我想我的形象一路沿着延伸到我的形象在我的内容，这里是我的代码。

<div class="row"> 
    <div class="container"> 
     <div class="col-md-12"> 
     <img src="<?php bloginfo('template_directory'); ?>/assets/img/homeBanner.jpg" alt="placeholder 960" class="img-responsive"/> 
     </div> 
    </div> 
    </div>

图像设置为宽度100％，所以不知道它为什么不填充容器。

来源

2016-04-29 pocockn

'row'类必须嵌套的'container'类，顺序改为'.container> .row> .col' –

，使我像去更小 – pocockn

检查它是否帮助

<div class="container-fluid no-padding"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1300%C3%97400&w=1300&h=400" alt="placeholder 960" class="img-responsive" /> 
    </div> 
    </div> 
</div>

你CSS

.no-padding { 
    padding-left: 0; 
    padding-right: 0; 
}

CSS类 “无填充” 将覆盖缺省引导容器填充。

完整的示例： https://jsfiddle.net/3hk9b1a2/

来源

2016-04-29 08:31:14 sQer

container类有15px的左&右填充，所以如果你想删除此填充，使用后，因为row类有-15px左&右页边距。

<div class="container"> 
    <div class="row"> 
    <img class='img-responsive' src="#" alt="" /> 
    </div> 
</div>

Codepen：http://codepen.io/m-dehghani/pen/jqeKgv

来源

2016-04-29 08:26:10

拉伸图像，以适应完整的容器宽度引导

回答

相关问题