Bootstrap 4、HTML 和 CSS 中的 <p></p> 标签问题

Question

我试图在一个 div 中使用多个 p 标签，但是段落并没有分开而是挤在一起。适用的代码如下：

<div class="row">
    <div class="col-md-12 d-flex justify-content-center padding-top">
        <p>IMPORTANT LEGAL DISCLAIMER FOR TESTIMONIALS, RISK AND TYPICAL RESULTS, AS WELL AS REFUNDS</p>
        <p>Test</p>
    </div>
</div>

这是代码链接：https://www.codeply.com/go/cJ37oz9g4Q。如果您访问codeply，您会发现在“REFUNDS”单词后面立即出现了“Test”。我已经尝试修改代码，寻找已知的问题等等。

我该如何修复它？

- user5487286

Answer 1

您需要从此代码中删除 d-flex 类：

<div class="col-md-12 justify-content-center padding-top">
  <p>IMPORTANT LEGAL DISCLAIMER FOR TESTIMONIALS, RISK AND TYPICAL RESULTS, AS WELL AS REFUNDS</p>
  <p>Test</p>
</div>

- Chandra Kumar

---

非常感谢你！ - user5487286

现在我已经修复了，你有什么想法为什么我的页脚下面有很多空白？谢谢！ - user5487286

Answer 2

这是因为 d-flex 类 - 它强制 <p> 变成 flex-items，并默认沿水平轴对齐。用 text-center 替换 d-flex 和 justify-content-center。

.social {
    margin: 0;
    padding: 0;
}

.social ul {
    margin: 0;
    padding: 5px;
}

.social ul li {
    margin: 5px;
    list-style: none outside none;
    display: inline-block;
}

.social i {
    width: 40px;
    height: 40px;
    color: #FFF;
    background-color: #909AA0;
    font-size: 22px;
    text-align:center;
    padding-top: 12px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social i:hover {
    color: #FFF;
    text-decoration: none;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social .fa-facebook:hover {
    background: #4060A5;
}

.social .fa-twitter:hover {
    background: #00ABE3;
}

.social .fa-instagram:hover {
    background: #375989;
}

.social .fa-youtube:hover {
    background: #FF1F25;
}

.social .fa-youtube-play:hover {
    background: #DF192A;
}

p {
    color: #FFF;
}

.paddding-top {
    padding-bottom: 15px;
    padding-top: 18px;
    border-bottom: 1px solid white;
}

/*this is the padding for the form from the top*/

.padding-form-top{
    padding-top: 18px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="bg-inverse">
    <div class="row">
        <div class="col-md-12 d-flex justify-content-center">
            <div class="social">
                <ul>
                    <li><a href="#"><i class="fa fa-lg fa-instagram"></i></a></li>
                    <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa fa-lg fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fa fa-lg fa-youtube"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
    
    <hr>
    
    <div class="row">
        <div class="col-md-12 text-center padding-top">
            <p>IMPORTANT LEGAL DISCLAIMER FOR TESTIMONIALS, RISK AND TYPICAL RESULTS, AS WELL AS REFUNDS</p>
            <p>Test</p>
        </div>
    </div>
    
    <hr>
    
    <div class="row">
        <div class="col-md-12 d-flex justify-content-center">
            <div class="col-md-4 col-md-offset-4 text-center padding-form-top">
                <form class="form-width">
                    <div class="form-group">
                        <input type="email" class="form-control" id="email" placeholder="Your Email Address">
                    </div>
                    <button type="submit" class="btn btn-success">Sign Up for the Latest Updates</button>
                </form>
            </div>
        </div>
    </div>
</footer>

- fen1x