Question

模态中的标题不可见。

如果我用鼠标突出显示它，它是可见的。我尝试添加模态内容颜色＃000，但这没有改变任何东西。

截至01/11/16 1:28 PM CST的答复和答案没有纠正这种情况。

我应该提到我正试图超越游戏;使用Bootstrap 4 alpha。不要看到4的模态部分中的任何变化虽然会产生任何影响并将top设置为100px。任何其他建议肯定会受到赞赏。

关于html代码有什么问题的任何想法？

    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
    Newsletter
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Subscribe to Newsletter
                </h4>
            </div>
            <div class="modal-body">
      <form class="form-signin">
        <h2 class="form-signin-heading">Receive Our Newsletter</h2>
        <label for="inputEmail" class="sr-only">Name</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Name" required autofocus>
        <label for="inputEmail" class="sr-only">City &amp; State</label>
         <input type="email" id="inputEmail" class="form-control" placeholder="City &amp; State" required autofocus>
        <label for="inputPassword" class="sr-only">Email address</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Email Address" required>
    <hr>
        <button class="btn btn-lg btn-primary btn-sm" type="submit">Subscribe</button>
      </form>        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
    </div>
  </div>

Answer 1

.modal-title {
    color: red;
}

Answer 2

            <strong>
            <h2 class="modal-title" id="myModalLabel" >
                Subscribe to Newsletter
            </h2></strong>

Answer 3

我遇到了同样的情况，并意识到我使用了错误版本的Bootstrap CSS。

我不得不取消fade css类。

您的情况就是这样

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
 aria-labelledby="myModalLabel" aria-hidden="true">

应该是

<div class="modal" id="myModal" tabindex="-1" role="dialog" 
 aria-labelledby="myModalLabel" aria-hidden="true">

Answer 4

从角度来看-您的代码有点格式化，bootstrap 4.2代码把它放在一个html文件中-它可以工作

它有效，必须是您的样式表...

<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    </head>
    <body>
        <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
            Newsletter

        </button>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Close</span>

                        </button>

                        <h4 class="modal-title" id="myModalLabel">
                            Subscribe to Newsletter
                        </h4>

                    </div>


                    <div class="modal-body">
                        <form class="form-signin">
                            <h2 class="form-signin-heading">Receive Our Newsletter</h2>
                            <label for="inputEmail" class="sr-only">Name</label>
                            <input type="email" id="inputEmail" class="form-control" placeholder="Name" required autofocus>
                            <label for="inputEmail" class="sr-only">City &amp; State</label>
                            <input type="email" id="inputEmail" class="form-control" placeholder="City &amp; State" required autofocus>
                            <label for="inputPassword" class="sr-only">Email address</label>
                            <input type="password" id="inputPassword" class="form-control" placeholder="Email Address" required>
                            <hr>
                            <button class="btn btn-lg btn-primary btn-sm" type="submit">Subscribe</button>
                        </form>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
                    </div>

                </div>

            </div>

        </div>

    </body>

</html>

Answer 5

在您编写模式标题的标题标签中使用 class =“ text-body”

Bootstrap模态标题不可见

5 个答案: