拉伸圖像，以適應完整的容器寬度引導

我有一個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

拉伸圖像，以適應完整的容器寬度引導

回答

相關問題