-1
私は自分のウェブサイトにいくつかの画像を配置しようとしています。それは大画面でうまく見えます。しかし、画面サイズを小さくすると、画像間の間隔が不規則になります。このように: 画像間の間隔が不揃いですか?
そして、これは他の二つの画像間の間隔である:あなたが不規則な間隔がある見ることができるように
。これを解決するにはどうしたらいいですか?また、画面サイズを小さくしたときに画像間に間隔を置いてはいけません。ここに私のコードです。
<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>