col-md-4クラスを使って行を作るにはどうすれば正確に同じ次元のイメージを置くことができますか？

Question

私は行ごとに4つのイメージを表示するために私のWebページで2つの行を作成する必要があります。しかし、コードにイメージを置くと、同じサイズのイメージのサイズを変更しても、イメージが異なる次元で表示されます。助けてください。行のコードは以下の通りである：

<div class="col-md-3"> 
        <div class="container"> 
        <img src="images/resized/photo.jpg" 
         alt="Avatar"> 
         <div class="overlay"> 
         <div class="text">Romance</div> 
        </div> 
        </div> 
       </div> 

行をカバーするクラスは以下の通りである：

.container { 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 20px; 
    padding-bottom: 10px; 
} 

Answer 1

。 containerは、ブートストラップによって使用されるクラスであり、あなたのCSSでそれを呼び出す方法は、ブートストラップグリッドシステム全体を混乱させます。

コンテナクラスの名前をmycontainerのように変更してください。