防止引導網格中的圖像溢出

跳回到html5和css3並首次使用bootstrap（不幸的是我不完全確定是否使用Bootstrap 4或其他版本，請耐心等待）。防止引導網格中的圖像溢出

爲了在我的網站上製作頁腳，我使用了可以調整以適應較小屏幕的網格。頁腳由只有3列的網格組成（所以它基本上將頁腳分成3個相等部分）當我的屏幕/頁腳寬度減少到低於850像素時，第一列出現問題。第一列當前有3張圖片，都是徽標。當屏幕縮小超過850px的寬度時，列溢出。前兩張圖像是可見的，但是第三張（最寬）溢出並且低於前兩張圖像，不再可見。所有圖像都是相同的高度。

我不希望發生這種情況。我試圖找到一種方法來根據用戶的屏幕寬度調整圖像的大小。如果我可以使這3張圖像按照屏幕尺寸縮放，這將是理想的，因此寬度越小，圖像越小。試圖查看是否有類，屬性或選擇器來幫助我解決這種情況。否則，我想象我必須重新格式化頁腳，以便在屏幕達到一定寬度時不再使用網格格式，並且簡單地將圖像與另一個相連。

謝謝。

編輯：與3圖像的網格列當前看起來像這樣。我不認爲CSS值得包括在內，尤其是因爲除了改變圖像高度外，沒有太多的造型。

<div class="col-xs-4 col-sm-4 col-md-4 col-lg-3"> 
    <p class="text-center"> 
     <a href="http://dcc.dickinson.edu"><img id="DCC-logo" class="img-fluid" src="/static/images/DCC-logo.png"></img></a> 
     <a href="http://www.cipl.ulg.ac.be/Lasla/"><img id="LASLA-logo" class="img-fluid" src="/static/images/LASLA-logo.png"></img></a> 
     <a href="http://tdh.brynmawr.edu/"><img id="TriCoDH-logo" class="img-fluid" src="/static/images/TriCoDH-logo.png"></img></a> 
    </p> 
</div>

來源

2017-05-25 Byron Smith

分享到像codepen或的jsfiddle – Bhuwan

添加的HTML的職位本身的代碼。 –

何不你是否在第三列col-xs-4 col-sm-4 col-md-4 col-lg-3內部爲圖像創建另一個網格結構，以便所有三個圖像都將包成一排，並且還將img-responsive類添加到所有img標記中以製作他們響應。

檢查下面的代碼片段：

@media (max-width:767px){ 
 
    .p5.col-xs-4{ 
 
    padding: 0 5px; 
 
    } 
 
    .m5.row{ 
 
    margin: 0 -5px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-3"> 
 
    <div class="row text-center m5"> 
 
    <div class="col-xs-4 p5"> 
 
     <a href="http://dcc.dickinson.edu"><img id="DCC-logo" class="img-responsive" src="http://placehold.it/150x150"></a></div> 
 
     <div class="col-xs-4 p5"> 
 
     <a href="http://www.cipl.ulg.ac.be/Lasla/"><img id="LASLA-logo" class="img-responsive" src="http://placehold.it/150x150"></a></div> 
 
     <div class="col-xs-4 p5"> 
 
     <a href="http://tdh.brynmawr.edu/"><img id="TriCoDH-logo" class="img-responsive" src="http://placehold.it/150x150"></a></div> 
 
    </div> 
 
</div>

來源

2017-05-25 20:32:08 Bhuwan

這實際上似乎是最有效的解決方案...這是我第一次使用Bootstrap，所以它只是從未想過我。因爲我仍然習慣Bootstrap，所以在實現這個之前我會查找一些更多的信息（例如，我不知道在這個上下文中引用了什麼'p5'） –

我已經使用過'.p5 '在這裏給班級添加'padding：0 5px'。我們不能改變bootstrap inbuild類的樣式，因爲這些類在各處都使用以防止我使用另一個類 – Bhuwan

讓您在使用的列的圖像全寬，所以如果你有一個像

<div class="row"> 
    <div class="col-xs-12 col-md-4"> 
     <img src="..."/> 
    </div> 
    <div class="col-xs-12 col-md-4"> 
     <img src="..."/> 
    </div> 
    <div class="col-xs-12 col-md-4"> 
     <img src="..."/> 
    </div> 
</div>

標記可以樣式圖像爲：

.row .col-md-4 img { 
    max-width: 100%; 
    width: 100%; 
}

來源

2017-05-25 16:51:11 Aotik

如果頁腳完全由這3張圖片組成，這將非常有用。確實，我的頁腳有三列，但三張圖片僅僅是其中一列的一部分。所以設置圖像寬度爲100％似乎並不有用（至少從運行我的代碼...什麼都沒有發生） –

防止引導網格中的圖像溢出

回答

相關問題