Bootstrap 模态显示但没有文本可见答案

【问题标题】：Bootstrap Modal shows but no text is visibleBootstrap 模态显示但没有文本可见
【发布时间】：2016-05-29 13:28:43
【问题描述】：

所以我很难弄清楚为什么我的文本没有显示在我的引导模式中。我已经测试过，它似乎只显示了包含在标题标签中的文本。不显示展开的文本和包含在段落标签中的文本。我真的很困惑。模态主体和背景完美显示，因此不是 javascript 问题。我的代码如下。此模式使用一些 Angular，但同样，任何包含在标题标签中的东西都可以工作......我想知道我是否遗漏了 Bootstrap 需要的东西以显示普通文本。我正在使用 Bootstrap v2.3.2。

<div id="column-select-modal" class="modal hide fade" tabindex="-1"    role="dialog" aria-hidden="true" ng-blur="show=false">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="show=false"><i class="icon-remove"></i></button>
        <h3 id="myModalLabel1">Adjust Data Columns</h3>
    </div>
    <div class="modal-body" style="height:250px;">
        <div class="fixedOverflowTable250">
            <table class="table table-striped table-hover table-bordered table-text-color swap-goal-modal-table">
                <thead>
                    <tr>
                        <th class="checkbox-align2 nogo text-align-left" style="width:73%;">
                            <h4>Column Name</h4>
                        </th>
                    </tr>
                </thead>
                <tbody data-ng-repeat="(key, value) in list">
                    <tr class="parent">
                        <td class="checkbox-align2 text-align-left">
                            <h5>{{key}}</h5>  <p>THIS DOES NOT SHOW</p> THIS DOESN'T EITHER
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
       <!--  <div class="clear"></div>
        <div class="alert alert-error" ng-show="columnError">{{columnError}}</div> -->
    </div>
    <div class="modal-footer">
        <button class="btn btn-success" data-ng-click="selectColumns(selectedColumns)">Apply</button>
        <button class="btn" data-dismiss="modal" ng-click="show=false">Cancel</button>
    </div>
</div>

我还确保我使用的其他类不会乱用我的 CSS。我还包含了一个屏幕截图链接来显示。在此先感谢您的帮助！ http://screencloud.net/v/bD79

【问题讨论】：

我认为它可能在您的列表中，请检查您的角度应用程序，因为您的模态显示。尝试在 ng-repeat 之外打印一些东西，或者用一些东西创建一行，然后重复。您是否在控制台中获得了“列表”值？
列表中的所有项目只要包含在标题标签中就会显示。
我相信我刚刚发现了问题所在。它不在我的模态中。它的样式远远超出了我的模态。我相信有一个 <div> 在我当前的 html 之外添加了 btn-group 类。此模式正在通过指令包含在内。我将进行实验并回到这个问题。

标签： javascript jquery css twitter-bootstrap bootstrap-modal

【解决方案1】：

好的，我刚刚发现了这个问题。我未包装的普通文本没有显示，因为我的模式包含在指令中，而该指令恰好位于 <div class="btn-group"> 中。显然这隐藏了普通文本。我没有意识到这一点，因为<div> 在我当前的工作代码之外。所以这在现实中可能是一个简单的错误，但显然未包装的文本不会显示在其类中具有 Bootstrap btn-group 的元素内部。

【讨论】：

感谢您分享您的解决方案，它确实为我节省了一些时间 :) 我的标题中有我的，这也导致了同样的问题。
亲爱的你救了我一百万年。谢谢。

【解决方案2】：

你刚刚在第一个不显示 div 内容的 div 中添加了隐藏类有一个小错误，请在下面的代码中找到你添加的内容

<div id="column-select-modal" class="modal hide fade" tabindex="-1"    role="dialog" aria-hidden="true" ng-blur="show=false">

使用低于一个

<div id="column-select-modal" class="modal fade" tabindex="-1"    role="dialog" aria-hidden="true" ng-blur="show=false">

从这个 div 中删除隐藏类，它会正常工作。

【讨论】：