響應式圖片不會像移動設備上顯示的那樣出現

遇到顯示移動設備響應式圖片的問題。網站上有6行獨立的圖像，但移動圖像顯示爲1行2個圖像，下一行是1個圖像，下一行是2個圖像，最後一行是1個圖像。當我將鼠標懸停在移動設備上的第一張圖片上時，所有圖片都應顯示爲3行中的2張圖片，並嘗試了所有操作來修復此問題，但不能。我在下面添加了HTML和CSS代碼。響應式圖片不會像移動設備上顯示的那樣出現

enter code here 

<div class="col-md-10"> 
<div class="xtx"> 
<a href="x"> <img src=".png" class="pull-left img-responsive" alt="" width="150" height="150"></a> 

<a href="x"> <img src=".png" class="pull-left img-responsive" alt="" width="150" height="150"></a> 

<a href="x"> <img src=".png" class="pull-left img-responsive" alt="" width="150" height="150"></a> 

<a href="x"> <img src=".png" class="pull-left img-responsive" alt="" width="150" height="150"></a> 

<a href="x"> <img src=".png" class="pull-left img-responsive" alt="" width="150" height="150"></a> 

<a href="x"> <img src=".png" class="pull-left img-responsive" alt="" width="150" height="150"></a> 
</div>

/*超小型設備（手機，低於768px）/ /因爲這沒有媒體查詢是在引導默認/ /小型設備（平板電腦，768px以上） */ @media（最小寬度：@屏幕-SM-分鐘）{...}

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { ... } 
.body{ 
background-color:#fff; 
} 
.fdr img{ 
float:left; 
margin:1%; 
background-color: #fff; 
border-radius: 5px; 
clear: right; 
-webkit-transition: margin 0.5s ease-out; 
-moz-transition: margin 0.5s ease-out; 
-o-transition: margin 0.5s ease-out; 
} 
.fdr img:hover{ 
margin-top:0.1%; 
} 
.img-responsive{ 
display:block; 
margin:auto; 
}

來源

2017-04-21 maret33

嘗試添加的元的頭標籤

<html> 
    <head> 
     <lang="en"> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width"> 
    </head>

012已經添加個

來源

2017-04-21 14:32:13

謝謝，但<！DOCTYPE HTML> <元名稱= 「視口」內容= 「寬度=設備寬度，初始規模= 1.0」/> – maret33

響應式圖片不會像移動設備上顯示的那樣出現

回答

相關問題