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

我有这样的 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+ */
    }
}

我希望这有帮助

原文地址：https://www.jb51.cc/bootstrap/233771.html