Question

可能有简单的问题，但无法弄清楚出了什么问题。我正在使用bootstrap表来显示数据。当用户更改浏览器大小时，该表是响应式并正确调整大小，只有一个例外，我无法找到解决方案。

看看我喜欢的照片。有3种状态：第1次看起来通常是完整的浏览器大小用户调整大小时的第二个 - 仍然可以第3次重新调整大小然后它会搞砸了

链接： https://www.dropbox.com/s/23pj6w2uu0lz716/fine-fullwith.png?dl=0

指望你的帮助。

请参阅下面的代码：

<style type="text/css">
    p {
        /*padding: 5px;*/
        font-size: 13px;
        text-align: center;
        word-wrap:break-word;
    }

    .ar {
        height: 50px;
    }

    .table tbody > tr > td.vert-align_td {
        vertical-align: middle;
    }

    .table thead > tr > th.vert-align_th{
        vertical-align: middle;
    }

</style>

    <div class="container-fluid">
        <div class="row">
     <div class="col-sm-1 col-lg-2">
    </div>

     <div class="col-sm-11 col-lg-10">
                    <div class="row">
                        <div class="col-md-12"> 

                            <div class="content-wrapper"></div>  

                            <div class="panel panel-default">
                                <div class="panel-heading"></div>
                                <div class="panel-body">
                                    <div class="table-responsive">

                                        <table class="table table-bordered table-hover" style="word-wrap: break-word;table-layout: fixed;">
                                            <thead>
                                                <tr>
                                                    <th class="col-md-3 text-center vert-align_th">Nazwa transportu</th>
                                                    <th class="col-md-2 text-center vert-align_th">Typ transportu</th>
                                                    <th class="col-md-2 text-center vert-align_th">Kierowca</th>
                                                    <th class="col-md-1 text-center vert-align_th">Numer rejestracyjny</th>
                                                    <th class="col-md-1 text-center vert-align_th">Firma spedycyjna</th>
                                                    <th class="col-md-1 text-center vert-align_th">Data przyjecia</th>
                                                    <th class="col-md-1 text-right vert-align_th">Przycisk</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @For Each item In Model
                                                    @<tr>
                                                        @*vert-align - look at top in css section*@
                                                         <td class="col-md-3 text-center vert-align_td"><a>@item.NazwaTransportu</a></td>
                                                         <td class="col-md-2 text-right vert-align_td">@item.TypTransportu</td>
                                                         <td class="col-md-2 text-center vert-align_td">@item.Kierowca</td>
                                                         <td class="col-md-1 text-center vert-align_td">@item.NumerRejestracyjny</td>
                                                         <td class="col-md-1 text-center vert-align_td">@item.FirmaSpedycyjna</td>
                                                         <td class="col-md-1 text-center vert-align_td">@item.DataPrzyjecia</td>
                                                         <td class="col-md-1 text-center vert-align_td">
                                                             <a rel="tooltip" class="btn btn-success btn-xs" href="">
                                                                 <i class="glyphicon glyphicon-plus icon-color"></i>
                                                                 dodaj
                                                             </a>
                                                         </td>
                                                    </tr>
                                                Next
                                            </tbody>
                                        </table>
                                    </div>
        </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


  [1]: http://i.stack.imgur.com/jrybd.png

Answer 1

Bootstrap Tables包含每个表格单元格（white-space: nowrap;）上的CSS属性<td>。这是通过添加类table-responsive来实现的。但是，您可以使用以下CSS代码段重置此属性：

.table tbody > tr > td.vert-align_td,
.table tbody > tr > th.vert-align_th {
   white-space: normal;
}

Bootsrap表格文字没有包裹在宽度较小的

1 个答案: