javascript - Bootstrap 模式中的 jQuery dataTable 溢出

Question

我在 Bootstrap 模式中有一个表。我在 dataTable 单元格内填充的内容非常大，它没有将文本换行以适合模态内的表格，而是溢出了模态，就像它无法获取模态宽度并换行文本一样。

截图:

我尝试了各种解决方案，例如指定 wrap CSS 以及指定表格宽度(以 % 和 px 为单位)以及在表格上设置宽度属性(以 % 和 px 为单位)，但表格绝对没有变化.非常感谢任何有关如何纠正此问题的建议。

代码摘录 1(模态):

<!-- List Questions Modal -->
<div class="modal fade" id="questionsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="width: 95%">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4>Questions</h4>
        </div>
        <div class="modal-body">
            <div class="row">
            <div class="responsive-table">
                <table width="900px" class="table table-bordered" style="margin-bottom:2em; width: 900px;" id="questionsTable">
                    <thead>
                        <tr>
                            <th >Code</th>
                            <th>Title</th>
                            <th>Instruction</th>
                            <th>Extract</th>
                            <th>class="text-center">Active</th>
                            <th class="text-center">Edit</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

代码摘录 2(数据表填充):

function showQuestions(quiz_id)
{
$('#questions_quiz_id').val('quiz_id');
window.questionsTable.fnClearTable();
$.post('{{ url("getGameQuestions") }}', {quiz_id : quiz_id})
.done(function(data)
{
    if (typeof(data.error) != 'undefined')
    {
        $('#error-msg').html(data.error);
        $('#page-error').fadeIn(300).delay(2000).fadeOut(500);
    }
    else
    {
        for(var d in data)
        {
            var question = data[d]; 
            var active = (question.active == undefined || question.active == false) ? "Inactive" : "Active";

            var ai = window.questionsTable.fnAddData([
                question.code,
                question.title,
                question.instruction,
                question.extract,
                active,
                '<i class="icon-pencil" style="cursor:pointer; color:#E48A07;" title="Edit" onclick="setQuestion('+question.id+')"></i>'
            ]);
            var oSettings = window.questionsTable.fnSettings();
            var addedRow = oSettings.aoData[ai[0]].nTr;
            addedRow.cells.item(2).setAttribute('width','29%');
            addedRow.cells.item(4).className = "text-center";
            addedRow.cells.item(4).className = "text-center";
            addedRow.cells.item(5).className = "text-center";
        }
        $('#questionsModal').modal('show');
    }
});
}

Answer 1

尝试删除

<div class="responsive-table">它可能会导致模式中的响应宽度失败。

您也可以尝试在 table 上指定一个 ma​​x-width。

虽然这是 Bootstrap 2.3.2 的问题并且看起来您使用的是 3，但这可能略有相关。

http://www.bootply.com/88364