CSS瓷砖大小调整

Question

我想让我的瓷砖看起来相同甚至文字内增加。但它似乎能够工作，即使与word 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-4到col-sm-4类，所以你可以看到它的行动。我包含引导CDN CSS，因为您在HTML中使用引导类名称。我添加了!important来覆盖锚标签上的内联颜色样式。

这里的小提琴看到它在行动： https://jsfiddle.net/mjqfjbh0/1/