文本換擋元件引導

Question

我使用的引導下表時，有太多的文字：

它推列下來，甚至沒有接近推前填充整個區域行的大小...加上文本不與自己對齊。我嘗試在CSS中的文本對齊來解決這個問題，但沒有找到答案。

這裏是沒有增加的混亂只是普通的代碼：

<div class="container"> 
      <table class="table"> 
       <thead> 
        <tr> 
         <th>Event</th> 
         <th>Last Ran</th> 
         <th>Next Run</th> 
         <th>Options</th> 
         <th>Details</th> 
        </tr> 
       </thead> 
       <tbody> 
        @foreach (PIM5.Web.Models.Event evt in Model.Events) 
        { 
         <tr class=@evt.status> 
          <td><b>@evt.name</b></td> 
          <td>@evt.lastRan</td> 
          <td>@evt.nextRun</td> 
          <td style="max-width: 150px"> 
           @if (evt.options > 0) 
           { 
            <button type="button" class="btn btn-success" onclick="doProcessStart('@evt.name')">Start</button> 
            <button type="button" class="btn btn-warning" onclick="doProcessStop('@evt.name')">Stop</button> 
            <button type="button" class="btn btn-info" onclick="doProcessEdit('@evt.name')">Edit</button> 
           } 

           @if (evt.options > 1) 
           { 
            <button type="button" class="btn btn-success">Force</button> 
           } 
           <button type="button" class="btn btn-danger" onclick="doProcessRemove('@evt.name')">Remove</button> 
          </td> 
          <td>@evt.description</td> 
         </tr> 
        } 
       </tbody> 
      </table> 
      <button class="btn btn-success" onclick="doAddEvent()">New Event</button> 
     </div> 

這是我想它做的事：

之前，首先填寫黑匣子區推下排和絕不增加排的寬度並關閉屏幕

願意使用JavaScript或任何可以解決此問題的東西。

Answer 1

您還可以使用內置的引導樣式col-md- *。這是回答這個問題：Bootstrap - how to set up fixed width for <td>?

對於引導3.0：

與Twitter自舉3使用：類= 「COL-MD- *」，其中*是一個數字寬度 列。

<tr class="something"> 
    <td class="col-md-2">A</td> 
    <td class="col-md-3">B</td> 
    <td class="col-md-6">C</td> 
    <td class="col-md-1">D</td> </tr> 

對於引導2.0：

與Twitter自舉2使用：類= 「跨度*」，其中*是一個數字寬度 列。

<tr class="something"> 
    <td class="span2">A</td> 
    <td class="span3">B</td> 
    <td class="span6">C</td> 
    <td class="span1">D</td> </tr> 

**如果你有設置寬度也並沒有對<TD>元素<日>元素。

Answer 2

給你TH的寬度，這將限制相應TD的寬度。你也可以用字斷打，以確保長期自動換行正確（https://css-tricks.com/almanac/properties/w/whitespace/）

Answer 3

這裏是你可以使用CSS - 類似的想法unpollo有：

.evtstatus td:last-child { 
    max-width: 200px; 
    word-wrap: break-word; 
} 

對於它的工作，你需要申請tr的類「eventstatus」。
如果文本較少，我也使用最大寬度。