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

这是你可以使用的css - 类似的想法unpollo：

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

要使它工作，你需要将类“eventstatus”应用于tr。
我也使用max-width以防文本较少。

Answer 2

您还可以使用内置的引导程序样式col-md- *。在这个问题中回答了这个问题：Bootstrap - how to set up fixed width for <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>  
**如果你有＆lt; th＆gt;元素设置宽度而不是＆lt; td＆gt;元件。

Answer 3

给你的THs宽度，这将限制相应TD的宽度。您还可以使用分词来确保长词正确包装（https://css-tricks.com/almanac/properties/w/whitespace/）

文本转换元素bootstrap

3 个答案: