Question

我正在尝试使用角度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>

问题是模态上的一切都有效，我也能看到所有文本和密码只有按钮超出模态区域，只有文本休息的任何按钮都不可见，但是当我做< / p>

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

这是image

有人可以帮忙吗???

Answer 1

似乎你的按钮有浮动：就在它上面。您的样式文件可以覆盖引导样式。

Answer 2

您在代码中缺少结束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>

按钮没有出现bootstrap模式4

2 个答案: