bootstrap 3將div中的文本內容用於水平對齊

Question

我的帖子標題在這裏可能會引起誤解。首先看看我目前的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&#39;re ...</small> 
     </p> 
     <p> 
      <a class="btn btn-default" href="/search/1355/detail/" role="button">View details &raquo;</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 &raquo;</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 &raquo;</a> 
      <button type="button" class="btn bookmark" id="1357" > 
      <span class=" 
        glyphicon glyphicon-star-empty "></span> 
      </button> 
     </p> 

     </div> 
</div> 

Answer 1

1）也許oveflow：hidden;會做詭計嗎？

2）你需要設置每個div的大小與文本和按鈕，使每個div具有相同的高度。然後你的按鈕：

button { 
    position: absolute; 
    bottom: 0; 
} 

Answer 2

添加下面的樣式到您h3元素：

word-wrap: break-word; 

這將導致他們的長URL來包裝。自動換行的默認設置是normal，該設置僅包含在一組有限的拆分令牌（例如空格，連字符）中，這些不包含在URL中。

Answer 3

現在更新換 - 被取代：

overflow-wrap:break-word; 

兼容老航海家和CSS 3這是很好的選擇！

它的自動換行的演變（2012年以來...）

查看更多信息： https://www.w3.org/TR/css-text-3/#overflow-wrap

見兼容性全： http://caniuse.com/#search=overflow-wrap