引导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>

不幸的是，内容溢出了巨型加速器，如下所示：

​

​

我该怎么解决这个问题？

编辑:这是另一个。编译后的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中的一个快速示例，通过使用引导程序4，一切看起来都如出一辙，我认为您应用了不同的样式，或者这不是浏览器上呈现的html。

​

<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>

​