問題<p></p> in Bootstrap 4，HTML和CSS

Question

我嘗試在一個分區中有多個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> 

和鏈接codeply是https://www.codeply.com/go/cJ37oz9g4Q。如果你去編碼，那麼你會看到「測試」出現在「REFUNDS」之後。我曾嘗試修改代碼，查找已知問題等。

我該如何解決這個問題？

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> 

Answer 2

這是因爲d-flex類 - 它迫使<p>成爲柔性項目，默認情況下它們對齊自理沿水平軸。與text-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>