### 前提 Bootstrap4を利用し、スマートフォン環境に適するべくコーディングを行っております。 ### 実現したいことポートフォリオとして、同サイズの画像を複数表示させたいのですが 50%くらいの割合で表示が崩れる状態となっており、この問題を解決したいと考えております。 ### 発生している問題・エラーメッセージ配置した画像が、ブラウザにて確認時50%くらいの割合で重なって表示されてしまいます。例として、 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-12-10/e19ccb0d-2e11-4680-a5e6-ff85cf69d93b.jpeg) この様に表示したい意図のものが、 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-12-10/e7a15fbb-7510-4b83-af2e-b54ad939f2f9.jpeg) この様に表示されてしまう事があります。 ### 該当のソースコード ```ここに言語名を入力

ポートフォリオ

画像Aのコメント

画像Bのコメント

画像Cのコメント

``` ```ここに言語名を入力 .grid-link a { margin: 5px; font-size: 20px; color: #000; } .grid-portfolio { overflow: hidden; } .gutter-sizer { width: 2%; } .grid-sizer, .grid-item { width: 32%; } .grid-item { margin-bottom: 20px; border-radius: 5px; overflow: hidden; } .grid-item:hover .grid-info { top: 50%; opacity: 1; } .grid-item-wrapper:before { content: ''; display: block; background: rgba(255, 255, 255, 0.7); position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: all .3s ease; opacity: 0; } .grid-item-wrapper:hover:before { opacity: 1; } .grid-info { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all .3s ease; } ``` ### 試したこと重なって表示された際、再読み込みを行うと重ならず意図通りに表示されます。毎度重なって表示されるなら対処しようがあるのですが、何回かに一度崩れるので困っております。 ### 補足情報（FW/ツールのバージョンなど） iPhone上のSafariにて、またPC上のSafari、Firefoxにて同様の状況となっております。どうぞお知恵をお貸しいただければ幸いです。

	@@ -1 +1 @@
1	- Bootstrapにて稀に画像が重なる
1	+ Bootstrapにて稀に画像が重なる現象を解決したい

質問編集履歴