CSSタイルのサイズを調整する

Question

私はタイルを同じプロパティ内でテキストも同じように見せようとしていますが、単語property.iでも機能するようですが、「購入延長保証」と「リスト」サービスパック」のためのマシンが他の人と同じになるように 誰でも助けることができる

.tile { 

width: 100%; 
display: inline-block; 
box-sizing: border-box; 
background: #fff; 
padding: 30px; 
margin-bottom: 40px; 
text-align:center; 

}

.tile:hover 
{ 
background:#F8F9F9; 
} 



    <div class="tab-pane active" id="warranty"> 
            <div class="col-md-4"> 
             <a class="tile" style="background-color:#EBDEF0;" href="#">Show warranty </a> 

            </div> 
            <div class="col-md-4"> 
             <a class="tile" style="background-color:#EBDEF0;" href="#">New Warranty</a> 

            </div> 
            <div class="col-md-4 "> 
             <a class="tile" style="background-color:#EBDEF0;" href="#">Delete Warranty</a> 

            </div> 
            <div class="col-md-4 "> 
             <a class="tile " style="background-color:#EBDEF0;" href="#">Enter Invoice</a> 

            </div> 
            <div class="col-md-4 "> 
             <a class="tile" style="background-color:#EBDEF0;" href="#">Enter Serial </a> 

            </div> 
            <div class="col-md-4"> 
             <a class="tile" style="background-color:#EBDEF0;" href="#">Buy extended warranty </a> 

            </div> 
            <div class="col-md-4 "> 
             <a class="tile" style="background-color:#EBDEF0;" href="#">List Machines for service pack</a> 

            </div> 
           </div> 

Answer 1

あなたはこのためにflex-boxを使用することができます。？

CSS：あなたがアクションでそれを見ることができるように

.tab-pane { 
    display: flex; 
    flex-wrap: wrap; 
} 

.tile { 
    width: 100%; 
    padding: 30px; 
    margin-bottom: 40px; 
    text-align: center; 
    display: block; 
} 

.tile:hover { 
    background: #F8F9F9 !important; 
} 

HTML

<div class="tab-pane active" id="warranty"> 
    <div class="col-sm-4"> 
     <a class="tile" style="background-color:#EBDEF0;" href="#">Show warranty </a> 

    </div> 
    <div class="col-sm-4"> 
     <a class="tile" style="background-color:#EBDEF0;" href="#">New Warranty</a> 

    </div> 
    <div class="col-sm-4 "> 
     <a class="tile" style="background-color:#EBDEF0;" href="#">Delete Warranty</a> 

    </div> 
    <div class="col-sm-4 "> 
     <a class="tile " style="background-color:#EBDEF0;" href="#">Enter Invoice</a> 

    </div> 
    <div class="col-sm-4 "> 
     <a class="tile" style="background-color:#EBDEF0;" href="#">Enter Serial </a> 

    </div> 
    <div class="col-sm-4"> 
     <a class="tile" style="background-color:#EBDEF0;" href="#">Buy extended warranty </a> 

    </div> 
    <div class="col-sm-4 "> 
     <a class="tile" style="background-color:#EBDEF0;" href="#">List Machines for service pack</a> 

    </div> 
</div> 

私はあなたのcol-md-4col-sm-4の上でクラスを調整しました。あなたのHTMLにブートストラップクラス名を使用しているので、私はブートストラップCDN CSSを含めました。そして、!importantを追加して、アンカータグのインラインカラースタイルをオーバーライドしました。ここで

は、アクションでそれを参照するにはフィドルです： https://jsfiddle.net/mjqfjbh0/1/