2

模式中的标题不可见。

如果我用鼠标突出显示它，它将变得可见。我尝试添加modal-content color: #000，但没有结果。

截至2016 年 1 月 11 日下午 1 点 28 分 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="text-body 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>

4

5 回答 5

1

我有同样的情况，并意识到我使用了错误版本的引导 css。

我不得不取消fadecss 课程。

就你而言，这就是你所拥有的

<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">
于 2019-01-03T23:51:49.737 回答
1 
.modal-title {
    color: red;
}
于 2016-01-11T16:09:49.410 回答
0

从角度来看-您的代码带有一些格式，引导程序 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>
于 2019-01-04T00:05:39.000 回答
0

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

于 2020-07-13T12:37:56.980 回答
0 
            <strong>
            <h2 class="modal-title" id="myModalLabel" >
                Subscribe to Newsletter
            </h2></strong>
于 2016-01-11T16:29:40.300 回答