twitter-bootstrap-rails最大列寬

Question

我正在使用twitter-bootstrap-rails設計一個非常簡單的應用程序。我的模型索引頁面中有一個顯示數據的表格，它看起來非常棒。問題是，如果某人輸入了一個非常長的字符串（例如URL），那麼這個字段的寬度會拉伸並擠壓所有其他字段。我想要一些方法來強制列的寬度，並告訴瀏覽器打破真正的長詞。

我到目前爲止所做的努力是每個<th>我已經添加了一個類，並嘗試使用CSS來控制寬度。下面是一個例子

<table> 
    <thead> 
    <tr> 
     <th class="column1"> etc 
     <th class="column2"> etc 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="column1"> etc 
     <td class="column2" etc 
    </tr> 
    </tbody> 
</table> 

然後，我在我的樣式表

th.column1 { width: 300px; 
    word-wrap:break-word;} 
td.column1 { width: 300px; 
    word-wrap:break-word;} 

至今未爲我工作用這個，我不知道我是否需要進行這麼多的重複我的代碼。

Answer 1

我最終修復了我自己的問題。我所做的是使用最大寬度，而不是寬度

th.column1 td.column1 { max-width:300px; word-wrap:break-word; }