javascript - Bootstrap 3 Modal 不会显示模态标题或输入标签

Question

我正在为一个 friend 的教堂定制 Bootstrap 模板。只是一些简单的事情，所以他们有一个网络存在。我正在创建一个联系表单，我希望它成为一个模式，用户可以在其中输入他们的信息然后发送他们的评论。但是，我遇到的问题是模态不会显示输入的模态标题或标签。我完全糊涂了，因为我实际上从我用 bootstrap 构建的以前的网页中复制了完全相同的代码。我只修改了一些东西(删除了一些输入组和更改了标题等)，但没有任何影响功能的东西。

这是正常运行的链接:www.rawgit.com/znagatani/schedule_me/master/index.html。

这是该模式的标记:

<button class="btn btn-success" id="cta" type="button" data-toggle="modal" data-target="#sign-up">Let's Go!</button>
<div class="modal" id="sign-up">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">X</button>
                 <h4 class="modal-title">Sign Up</h4>

            </div>
            <div class="modal-body">
                <div class="input-group">
                    <label for="first-name">First Name</label>
                    <input type="text" class="form-control modal-sign" placeholder="Goku" />
                </div>
                <div class="input-group">
                    <label for="last-name">Last Name</label>
                    <input type="text" class="form-control modal-sign" placeholder="Son" />
                </div>
                <div class="input-group">
                    <label for="text">Valid Email</label>
                    <input type="email" class="form-control modal-sign" placeholder="kakarot7z@example.com" />
                </div>
                <div class="input-group">
                    <label for="username">Username</label>
                    <input type="text" class="form-control modal-sign" placeholder="ssjssgWarrior" />
                </div>
                <div class="input-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control modal-sign" placeholder="kamehamehax10" />
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">Close</button>
                <button class="btn btn-success">Create Account</button>
            </div>
        </div>
    </div>
</div>

然后这里是教堂的链接:www.rawgit.com/znagatani/cross_bootstrap/contact-modal/index.html

这是标记:

<!-- Button trigger modal -->
<button type="button" class="btn btn-contact btn-lg" data-toggle="modal" data-target="#contact-us">Contact Us</button>
<!-- Modal -->
<div class="modal fade" id="contact-us">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Sign Up</h4>

            </div>
            <div class="modal-body">
                <div class="input-group contact-input">
                    <label for="first-name">First Name</label>
                    <input type="text" class="form-control modal-sign" placeholder="John" />
                </div>
                <div class="input-group contact-input">
                    <label for="last-name">Last Name</label>
                    <input type="text" class="form-control modal-sign" placeholder="Doe" />
                </div>
                <div class="input-group contact-input">
                    <label for="text">Valid Email</label>
                    <input type="email" class="form-control modal-sign" placeholder="example@example.com" />
                </div>
                <div class="form-group">
                    <label for="comment">Comment:</label>
                    <textarea class="form-control" placeholder="What's your question, comment, or concern?"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">Close</button>
                <button class="btn btn-success">Send it!</button>
            </div>
        </div>
    </div>
</div>

可以看到第一个正确显示了标签和标题；第二个没有。为什么是这样？？如果答案在模态标记中不是很明显，那么模板可能覆盖了 Bootstrap 的 javascript。

如果这个问题已经被问过，我很抱歉……我搜索了一下，没有找到任何可以回答这个特定问题的东西。非常感谢!

Answer 1

将此样式添加到您的自定义 css 文件:

.modal-content {
    color: #000;
}

这会将模态框的标签和标题的 font-color 更改为黑色。