Bootstrap 4 Jumbotron内容溢出

Question

我实现了像这样的Jumbotron元素：

<div className="jumbotron">
<div>
<h6 className="display-6">Reset Password</h6>
<p className="lead">We've just emailed you password reset instructions at <u>{this.email && this.email}</u></p>
<hr className="my-4" />
</div>
</div>

不幸的是，内容溢出了jumbotron，就像这样：

我该如何解决这个问题？

编辑：这是另一个。编译后的HTML在我的浏览器中显示如下：

<div class="container">
    <div class="jumbotron">
         <h6 class="display-6">Activate account</h6>
         <p class="lead"><!-- react-text: 215 -->Please confirm the verification code we've just emailed you at <!-- /react-text --><u>b_kogan@hotmail.com</u></p>
        <button class="btn btn-primary">Resend email verification code</button>
    </div>
</div>

而且，它又溢出来了：

Answer 1

以下是您在HTML中使用bootstrap 4并且所有内容都按预期显示的快速示例，我认为您应用了不同的样式，或者这不是浏览器上呈现的html。

＆＃13;

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div>
<h6 class="display-6">Reset Password</h6>
<p class="lead">We've just emailed you password reset instructions at <u>{this.email && this.email}</u></p>
<hr class="my-4" />
</div>
</div>

＆＃13;

＆＃13;

＆＃13;