Question

我有一个bootstap模式，在模态体中有标签。在每个选项卡中我都有一个常规表，这些行稍后会用jquery附加到表中。

我的问题是列中的文本从不换行，因此表的右侧显示在模态体外。

我该如何解决这个问题？这是我的HTML模式。

<div class="modal modal-wide fade" id="detailsmodal" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="details">Detaljer</h4>
            </div>
            <div class="modal-body" id="detailsmodalBody">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#MetaDataTab" data-toggle="tab">MetaData</a></li>
                    <li><a href="#EnhetTab" data-toggle="tab">Enhet</a></li>
                    <li><a href="#ApparTab" data-toggle="tab">Appar</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="MetaDataTab">
                        <br />
                        <br />
                        <table id="detailvalues" class="table table-bordered">
                            <thead>
                                <tr bgcolor="#4d4f53">
                                    <th>Metadata</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>AppleID#1: </td>
                                    <td id="modalMetaDataCol1">No data</td>
                                </tr>
                                <tr>
                                    <td>AppleID Password#1: </td>
                                    <td id="modalMetaDataCol2">No data</td>
                                </tr>
                                <tr>
                                    <td>AppleID#2: </td>
                                    <td id="modalMetaDataCol3">No data</td>
                                </tr>
                                <tr>
                                    <td>AppleID Password#2: </td>
                                    <td id="modalMetaDataCol4">No data</td>
                                </tr>
                                <tr>
                                    <td>SIMpin: </td>
                                    <td id="modalMetaDataCol5">No data</td>
                                </tr>
                                <tr>
                                    <td>Losekod: </td>
                                    <td id="modalMetaDataCol6">No data</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane" id="EnhetTab">

                        <br />
                        <br />
                        <table class="table table-bordered" id="devicedetailsTable">
                            <thead>
                                <tr bgcolor="#4d4f53">
                                    <th>Detalj</th>
                                    <th>Värde</th>
                                </tr>
                            </thead>
                            <tbody id="devicedetails">
                            </tbody>
                        </table>

                    </div>
                    <div class="tab-pane" id="ApparTab">

                        <br />
                        <br />
                        <table class="table table-bordered">
                            <thead>
                                <tr bgcolor="#4d4f53">
                                    <th>Apps</th>
                                </tr>
                            </thead>
                            <tbody id="appvalues">
                            </tbody>
                        </table>

                    </div>

                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

Answer 1

尝试在你的css中使用word-wrap:break-word来破坏列中的行，并在表格中width:auto来限制其在模式中的大小。

模态尺寸问题内的bootstrap表

1 个答案: