2017-12-17 7 views
-1

私は自分のウェブサイトにいくつかの画像を配置しようとしています。それは大画面でうまく見えます。しかし、画面サイズを小さくすると、画像間の間隔が不規則になります。このように: enter image description here画像間の間隔が不揃いですか?

そして、これは他の二つの画像間の間隔である:あなたが不規則な間隔がある見ることができるように enter image description here

。これを解決するにはどうしたらいいですか?また、画面サイズを小さくしたときに画像間に間隔を置いてはいけません。ここに私のコードです。

<ul class="navbar-nav ml-auto"> 
<li class="nav-item"> 
<a class="nav-link" href="#about"><span style="color:grey;"> 
<strong>ABOUT</strong></span></a> 
</li> 
<li class="nav-item"> 
<a class="nav-link" href="#portfolio"><span style="color:grey;"> 
<strong>PORTFOLIO</strong></span></a> 
</li> 
<li class="nav-item"> 
<a class="nav-link" href="#contact"><span style="color:grey;"> 
<strong>CONTACT</strong></span></a> 
</li> 
</ul> 
</div> 
<button class="navbar-toggler navbar-toggler-right" type="button" 
data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" 
aria-expanded="false" aria-label="Toggle navigation"> 
<span class="navbar-toggler-icon"></span> 
</button> 
</nav> 
<div id="about" style="background-color:#99A3A4;padding- 
top:70px;justify-content:center;" class="container text-center"> 
<div class="row" style="padding:30px;margin-top:50px;"> 
<div class="col-xs-12 col-md-7" style="color:white;font-size:20px;"> 
Front-End Developer and UX/UI designer, with practical experience in 
project management, branding strategy, and creative direction; 
devoted to functional programming and information architecture. 
<hr style="border:3px solid white;"> 
Web Developer - User Experience Designer - Graphic Artist 
</div> 
<div class="col-xs- 12 col-md-4 offset-md-1"> 
<img class="img-fluid" src="avatar.jpg" height="250" width="250" 
style="border-radius:50%;margin:auto;"> 
</div> 
</div> 
</div> 
<div id="portfolio" style="background-color:#F4F6F7;" 
class="container text-center"> 
<h2 style="color:grey;padding-top:60px;padding-bottom:20px;"> 
<strong>PORTFOLIO</strong></h2> 
<hr style="border:2px solid grey;width:500px;"> 
<div class="row"> 
<div class="col-xs-12 col-md-6"> 
<img class="img-fluid img-thumbnail h-75" src="img1.jpg"> 
</div> 
<div class="col-xs-12 col-md-6"> 
<img class="img-fluid img-thumbnail h-75" src="img2.jpg"> 
</div> 
<div class="col-xs-12 col-md-6"> 
<img class="img-thumbnail img-fluid h-75" src="img3.jpg"> 
</div> 
<div class="col-xs-12 col-md-6"> 
<img class="img-thumbnail img-fluid h-75" src="img4.jpg"> 
</div> 
<div class="col-xs-12 col-md-6"> 
<img class="img-thumbnail img-fluid h-75" src="img5.jpg"> 
</div> 
<div class="col-xs-12 col-md-6"> 
<img class="img-thumbnail img-fluid h-75" src="img6.jpg"> 
</div> 
</div> 
</div> 
</body> 
</html> 

答えて

0

イメージ間にスペースを必要としない場合は、小さなデバイス用のメディアクエリを作成し、余白/パディングを削除します。

関連する問題