文字移位元素引导

Question

当文本过多时，我使用下表使用引导程序：

它会向下推列，甚至在推入行大小之前都无法填满整个区域。此外，文本与自身不对齐。 我尝试在CSS中使用text-align来解决此问题，但在此找不到任何答案。

这是混乱的代码 ，没有一般的添加：

   <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

这是您可以使用的CSS-Unpollo也有类似的想法：

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

为使其正常工作，您需要将类“ eventstatus”应用于tr。
如果文本较少，我也会使用max-width。

Answer 2

您也可以使用内置的引导程序样式col-md- *。 在以下问题中得到了解答： 引导程序-如何为<td>设置固定宽度？

对于Bootstrap 3.0：

使用twitter bootstrap 3时，请使用：class =“ 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> 

对于Bootstrap 2.0：

使用twitter bootstrap 2时，请使用：class =“ span *”其中*是宽度的列数。

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

**如果您有<th>个元素，请在此处而不是在<td>元素上设置宽度。

Answer 3

给出TH的宽度，这将限制相应TD的宽度。 您还可以使用断字功能来确保长字正确换行（ https://css-tricks.com/almanac/properties/w/whitespace/ ）