こんにちは私はブートストラップ4でhttps://www.pexels.com/のようなイメージギャラリーを作ろうとしていますが、ブートストラップは私が望むような写真を配置していません。https://www.pexels.com/のような画像ギャラリー4ブートストラップ4
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<img src="imgsource" alt="">
</div>
</div>
</div>
CSS
img{
width: 100%;
}
私の結果 enter image description here
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<style>
ul {list-style: none}
</style>
</head>
<body>
<div class="row">
<ul>
<!-- first row -->
<li class="col-md-6"><img src=""></li>
<li class="col-md-2"><img src=""></li>
<li class="col-md-2"><img src=""></li>
<li class="col-md-2"><img src=""></li>
<!-- second row -->
<li class="col-md-5"><img src=""></li>
<li class="col-md-5"><img src=""></li>
<li class="col-md-2"><img src=""></li>
<!-- third row -->
</ul>
</div>
</div>
</body>
</html>
Height of the image must be same but width can vary.
Total screen contains 12 columns. According to the style choose the
column size.
ブートストラップグリッドシステムは、あなたがしたいカスタムレイアウトを提供するために構築されていません。手動でコードを作成するか、JavaScriptプラグインを使用する必要があります。 –
これまでのところ、あなたの目標に向かって進むことは絶対にありませんでした。これは、あなたが私たちがあなたのために無料で働くことを期待していることを意味します。それはかなり言いたいことです：私はクライアントのためのウェブサイトを作った。今私は別のクライアントがあり、最初のサイトを2番目のサイトに変更したいと思っています。最初のクライアントのウェブサイトはここにあります。あなたの意見では、あなたが期待している結果を生むべきコードで質問を編集してください。また、あなたのコードがうまくいくと思ったリソース/ドキュメンテーションで更新してください。 –
あなたがこれから得られる最も助けになります。 'float：left' – Ylama