Мой заголовок здесь может ввести в заблуждение. сначала посмотрим на HTML, который у меня есть сейчас:
Как вы можете видеть, каждое текстовое содержимое столбца переполняется в следующий столбец. Во-вторых, каждый из них не выравнивается по горизонтали. (например, ссылка для view details
не выравнивается прямо). Я хочу, чтобы они были выровнены прямо, независимо от длины текста.
Вот мой HTML-код: (содержимое здесь динамически генерируется, поэтому количество элементов будет меняться). Я использую bootstrap 3 в своем коде.
<div class="row" style="box-shadow: 0 0 30px black;">
<div class="col-6 col-sm-6 col-lg-4">
<h3>2005 Volkswagen Jetta 2.5 Sedan (worcester http://www.massmotorcars.com) $6900</h3>
<p>
<small>2005 volkswagen jetta 2.5 for sale has 110,000 miles powere doors,power windows,has ,car drives excellent ,comes with warranty if you're ...</small>
</p>
<p>
<a class="btn btn-default" href="/search/1355/detail/" role="button">View details »</a>
<button type="button" class="btn bookmark" id="1355" >
<span class="
glyphicon glyphicon-star-empty "></span>
</button>
</p>
</div>
<!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h3>2006 Honda Civic EX Sedan (Worcester www.massmotorcars.com) $7950</h3>
<p>
<small>2006 honda civic ex has 110,176 miles, has power doors ,power windows,sun roof,alloy wheels,runs great, cd player, 4 cylinder engen, ...</small>
</p>
<p>
<a class="btn btn-default" href="/search/1356/detail/" role="button">View details »</a>
<button type="button" class="btn bookmark" id="1356" >
<span class="
glyphicon glyphicon-star-empty "></span>
</button>
</p>
</div>
<!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h3>2004 Honda Civic LX Sedan (worcester www.massmotorcars.com) $5900</h3>
<p>
<small>2004 honda civic lx sedan has 134,000 miles, great looking car, interior and exterior looks nice,has cd player, power windows ...</small>
</p>
<p>
<a class="btn btn-default" href="/search/1357/detail/" role="button">View details »</a>
<button type="button" class="btn bookmark" id="1357" >
<span class="
glyphicon glyphicon-star-empty "></span>
</button>
</p>
</div>
</div>