文本移动元素引导

Posted 2023-03-05

【中文标题】文本移动元素引导

【英文标题】：Text shifting elements bootstrap

【发布时间】：2016-05-03 03:04:57

【问题描述】：

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

在推动行的大小之前，它会将列向下推，甚至没有接近填充整个区域...另外，文本与自身不对齐。我在 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 或任何可以解决此问题的方法。

【问题讨论】：

每列固定宽度

固定宽度不适合移动设备 - 使用 % 宽度 - 在这种情况下，尽管使用引导列，因为已经使用引导

【参考方案1】：

您还可以使用内置的引导样式 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>  

** 如果你有

元素设置宽度，而不是 元素。

【讨论】：

表仍然膨胀导致溢出-x 在 td 的样式中添加 word-wrap: break-word; 应该可以修复它

【参考方案2】：

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

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

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

【参考方案3】：

给您的 TH 宽度，这将限制相应 TD 的宽度。您还可以使用分词来确保长单词正确换行 (https://css-tricks.com/almanac/properties/w/whitespace/)