响应式数据表不起作用

Question

我正在使用Datatables.net，以及datatables和bootstrap。我想我的问题是：数据表响应引导程序用什么来检测溢出，因为它显然不是父级宽度。

这是我的结果：

这是一个非常简单的问题。如果我将窗口的宽度减少1个像素，则该列最终将崩溃。如果再将其展开，它将返回此状态。我想防止从父引导面板溢出。我已经删除了引导网格div（row / col-xs-12等）以消除潜在的问题，但是一旦解决了该问题（或者我更好地理解了问题），我也打算使用引导网格系统。

var tablaCRMEtapa;
var llenartablaCRMEtapa = function () { 
    DTOptions.ajax = { "url": "@(Url.Action("ListaCrmEtapaAjax"))", "method": "POST", "data": { "IdCliente": '@ViewBag.Id' } },
    DTOptions.language = { "url": "@Url.Content("~/Content/DataTables/Spanish.js")" };
    DTOptions.aoColumns =
    [
        { "sName": "Nombre", "bSortable": true, "bSearchable": false },
        { "sName": "FechaInicio", "bSortable": true, "bSearchable": false },
        { "sName": "FechaFin", "bSortable": false, "bSearchable": false },
        { "sName": "Descripcion", "bSortable": false, "bSearchable": false }
    ];
    tablaCRMEtapa = $('#datatableCrmEtapa').DataTable(DTOptions);
};

$(document).ready(function () {
    llenartablaCRMEtapa();
});

<div class="x_panel">
    <div class="x_title">
        <h4 class="index-title inline">@ViewBag.Title</h4>
    </div>
    <div class="x_content">
        <table id="datatableCrmEtapa" class="table table-responsive table-striped table-bordered dt-responsive nowrap">
            <thead>
                <tr class="parent odd" role="row">
                    <th data-priority="1">
                        @Html.DisplayNameFor(model => model.Nombre)
                    </th>
                    <th data-priority="1">
                        @Html.DisplayNameFor(model => model.FechaInicio)
                    </th>
                    <th data-priority="1">
                        @Html.DisplayNameFor(model => model.FechaFin)
                    </th>
                    <th data-priority="2">
                        @Html.DisplayNameFor(model => model.Descripcion)
                    </th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>