Предложения по исправлению столбцов в Bootstrap?

Question

Как я могу сделать 3 столбца мертвыми? В настоящее время они распространены.

<div class="container container2"> 
<div class="row no-gutter"> 
    <div class="col-md-4"> 
    <h1>1</h1> 
    <p class="description1">elige<br>tu box</p> 
     <img class="crop-img" src="img/icono_elige.jpg" alt="delivery" /> 
    <p class="description">elije entre la</br><b>box mensual</b> o la <b> </br> box personalizada</b></p> 
    </div> 

    <div class="col-md-4"> 
    <h1>2</h1> 
     <p class="description1">elige<br>tus snacks</p> 
     <img class="crop-img" src="img/icono_snacks.jpg" alt="elige" /> 
     <p class="description">encuentra mas de<br> <b>80 snacks</b> y<br>agregalos a tu box</p> 
    </div> 


    <div class="col-md-4"> 
     <h1>3</h1> 
     <p class="description1">pide y<br>recibe</p> 
     <img class="crop-img" src="img/icono_delivery.png" alt=elige /> 
        <p class="description">para ti, para<br> compartir o para<br>regalar</p> 
    </div> 
</div> 

http://imgur.com/a/UjOlV

Top - То, что я

Bottom - Что мне нужно

Спасибо за вашу помощь :)

Answer 1

Все три коробки имеют одинаковую ширину (где- около 33,3333%). Я думаю, вы используете text-align: center;, который поместит содержимое в середину ящиков. Я думаю, что лучшее решение делает меньший размер.

Вы также можете использовать col-push и col-pull.

Чтобы узнать больше об этом, уточните http://getbootstrap.com/css/#grid-offsetting.

Просто попробуйте использовать колонки разных размеров и компенсировать их.