javascript - 文本移动元素 Bootstrap

Question

当文本太多时，我使用 bootstrap 得到下表:

它会向下插入列，甚至不会在插入行的大小之前接近填满整个区域...而且文本未与自身对齐。我尝试在 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

您还可以使用内置的 Bootstrap 样式 col-md-*。这在这个问题中得到了回答:Bootstrap - how to set up fixed width for <td>?

For Bootstrap 3.0:

With twitter bootstrap 3 use: class="col-md-*" where * is a number of columns of width.

<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>  

For Bootstrap 2.0:

With twitter bootstrap 2 use: class="span*" where * is a number of columns of width.

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

** If you have <th> elements set the width there and not on the <td> elements.