按钮未出现引导程序 4 的模式

Question

我正在尝试在 angular 4 上使用 bootstrap 4 创建一个弹出窗口，

<div>
<span class="text-center" id="span1">{{title}}</span>
<button type="button" class="btn primary-btn" data-toggle="modal" data-target="#myModal">{{signUp}}</button>
</div>

<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <div class="modal-title">
                {{modalTitle}}
            </div>
        </div>
        <div class="modal-body">
          Username : <input type="text" placeholder="username">
          <br>
          <br>
          Password : <input type="password" placeholder="*****">         
        </div>
        <div class="modal-footer">
                <button type = "button" class="btn btn-primary">click me</button>
        </div>
    </div>

</div>

问题是一切都在模态上工作，我还可以看到所有文本和密码，只有按钮在模态区域之外，也只有文本其余按钮的任何内容都不可见，但是当我这样做时

<input type="button" value="click me"> It works

这是image

有人可以帮忙吗？？？

Answer 1

您的代码中缺少一个结束 div 标记。另外，我怀疑您可能使用的是过时版本的 Bootstrap 4 文件（最新版本是 beta 3）。

最新的 Bootstrap 4 版本使用 popper.js 而不是 tether.js。

这是我在使用您的代码时看到的（在添加缺少的结束标记之后）：

这看起来很像你想要的，对吧？

这是我使用的代码（包括最新的 Bootstrap 4 文件）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<div>
    <span class="text-center" id="span1">{{title}}</span>
    <button type="button" class="btn primary-btn" data-toggle="modal" data-target="#myModal">{{signUp}}</button>
</div>

<div id="myModal" class="modal" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">
                    {{modalTitle}}
                </div>
            </div>
            <div class="modal-body">
                Username : <input type="text" placeholder="username">
                <br>
                <br>
                Password : <input type="password" placeholder="*****">         
            </div>
            <div class="modal-footer">
                <button type = "button" class="btn btn-primary">click me</button>
            </div>
        </div>
    </div>
</div>



<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

Answer 2

您的按钮似乎有 float: 就在它上面。您的样式文件可能会覆盖引导程序样式。