twitter-bootstrap – 引导响应表内容包装

发布时间：2020-12-18 00:26:35 所属栏目：安全来源：网络整理

导读：我有这样的 HTML： div class="table-responsive" table class="table borderless" caption h3Announcements/h3 /caption tbody tr td If you are waiting for your certificate from your trainer,please contact them. Our turnaround time is between 1-2

我有这样的 HTML：

<div class="table-responsive">
         <table class="table borderless">
             <caption>
                  <h3>Announcements</h3>
             </caption>
             <tbody>
                 <tr >
                     <td>                                        
                         If you are waiting for your certificate from your trainer,please contact them. Our turnaround time is between 1-2 months from the time we receive your details from your trainer,which we expect to be at the start of your program. The remainder is dependent upon how quickly your trainer has send in all the required paperwork and made payment,etc.                                       
                     </td>
                 </tr>
             </tbody>
         </table>
     </div>

当我在一个小的视图端口中查看输出时,表格被重新调整大小,但表格单元格中的段落内容没有被包装,所以显示了滚动条.我预计响应行为将包含段落内容.我该如何实现？

解决方法

我遇到了同样的问题,但上述答案并没有解决我的问题.我能够解决这个问题的唯一方法是使用一个类,并使用特定的宽度来触发特定用例的包装.例如,我在下面提供了一个代码片段 – 但是我发现您需要调整相关表格,因为我通常根据布局使用多个colspans.推理我认为Bootstrap是失败的 – 是因为它删除了包装约束,以获得一个完整的滚动条表.这个colspan必须绊倒了.

<style>
@media (max-width: 768px) { /* use the max to specify at each container level */
    .specifictd {    
        width:360px;  /* adjust to desired wrapping */
        display:table;
        white-space: pre-wrap; /* css-3 */
        white-space: -moz-pre-wrap; /* Mozilla,since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        word-wrap: break-word; /* Internet Explorer 5.5+ */
    }
}

我希望这有帮助

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!