Ошибка отображения html + CSS div

Question

N.B: Я использую bootstrap только для столбцов. и это пользовательская страница на моем веб-сайте WordPress. образ задачи: screen shoot for problem and what i want

это мой код HTML:

<div class="row"> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="http://www.cheapwp.com/wp-content/uploads/2016/08/blog-481x230.jpg" alt="blog service"> 
     <div class="caption"> 
     <h3>Blog services</h3> 
     <p>We can create for you professional blog, or edit your blog, or other Services for it </p> 
     <p><a href="#" class="click" role="click">Check Now</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="http://www.cheapwp.com/wp-content/uploads/2016/08/ForumLogo_FINAL_red.jpg" alt="Forum services"> 
     <div class="caption"> 
     <h3>Forum services</h3> 
     <p>We can create for you any type fo forums, or edit , or other Services for it </p> 
     <p><a href="#" class="click" role="click">Check Now</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="http://www.cheapwp.com/wp-content/uploads/2016/08/landing-page-blog-marketeamos.jpg" alt="Landing page services"> 
     <div class="caption"> 
     <h3>Landing page services</h3> 
     <p>Landing page is our mession Contact us here </p> 
     <p><a href="#" class="click" role="click">Check Now</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="http://www.cheapwp.com/wp-content/uploads/2016/08/564-315px.png" alt="Web hosting services help"> 
     <div class="caption"> 
     <h3>Web hosting services help</h3> 
     <p>We can help you to choose best hosting ever for your need</p> 
     <p><a href="#" class="click" role="click">Check Now</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="http://www.cheapwp.com/wp-content/uploads/2016/08/empresas-de-hospedagem-web-480x240.jpg" alt="burchase web hosting or domain"> 
     <div class="caption"> 
     <h3>burchase web hosting or domain</h3> 
     <p>We can buy for You Good Hosting as your budget</p> 
     <p><a href="#" class="click" role="click">Check Now</a></p> 
     </div> 
    </div> 
    </div> 
</div> 

и это CSS код:

.thumbnail{ 
    border:1px solid #c1c1c1; 
    padding: 4px; 
    margin-bottom:20px; 
    float: left; 
    display: block; 
    position: relative; 
} 
.click { 
    background-color: #44ccf2; 
    border-radius: 2px; 
    color: #ffffff !important; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    margin: 4px 2px; 
    cursor: pointer; 
} 
.click:hover { 
    background-color: #2f3c4e; 
    border-radius: 2px; 
    color: #ffffff !important; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    margin: 4px 2px; 
    cursor: pointer; 
} 

пожалуйста, помогите мне, я не могу исправить без вас спасибо

Answer 1

Вы можете изменить .thumbnail из display: block для отображения: inline-block и снимите float: left. Кроме того, вам необходимо будет удалить float из классов .col и перейдите на display: inline-block;

Answer 2

попробуйте это, удалите поплавок слева и замените отображаемый встроенный блок.

.thumbnail{ 
    border:1px solid #c1c1c1; 
    padding: 4px; 
    margin-bottom:20px; 
    display: flex; 
    position: relative; 
}