无法在引导程序中将 div 向右对齐

Question

所以我正在使用 Bootstrap 制作一个简单的网站，但这里的问题是我想将我的第二个 div（带有 lorem 文本的那个）分配到网页的右侧。 但即使我尝试使用 ms-0 和 CSS 文本对齐，它也会下降？ 您能否建议我如何在页面右侧分配该 div？

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <section class="serviceoffers"> <div class="conatiner heading text-center"> <h1 class="text-center font-weight-bold font-size">What We Offer</h1> <p class="text-center lead">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <div class="container"> </div> <div class="row"> <div class="col-lg-6 col-10 offset-lg-0 font-graph"> <div class=" nameLan my-3 "> <h2>Java</h2> <div class="progress-bar progress progress-bar-striped bg-success progress-bar-animated rounded" style="width: 100%;">100%</div> </div> <div class="nameLan my-3"> <h2>HTML & CSS</h2> <div class="progress-bar progress w-75 progress-bar-striped bg-info progress-bar-animated rounded" style="width: 100%;">75%</div> </div> <div class="nameLan my-3"> <h2>ReactJs</h2> <div class="progress-bar progress w-55 progress-bar-striped bg-info progress-bar-animated rounded" style="width: 100%;">55%</div> </div> <div class="nameLan my-3"> <h2>C++</h2> <div class="progress-bar progress w-55 progress-bar-striped bg-danger progress-bar-animated rounded" style="width: 100%; height: 15px;">55%</div> </div> <div class="nameLan my-3"> <h2>Python</h1> <div class="progress-bar progress w-50 progress-bar-striped progress-bar-animated rounded" style="width: 100%;">50%</div> </div> </div> <div class="col-lg-6 col-md-12 col-12 servicediv ml-auto "> <?-- How to align this to right, --> <div class="row "> <div class="col-lg-2 col-2 service-icons"> <i class="fa-2x fas fa-laptop align-self-start" aria-hidden="true"></i> </div> <div class="col-lg-10 col-10"> <h2>Hi there</h2> <p>Lorem ipsum. dolor sit amet consectetur adipisicing elit, Accusamus ullam quas non rem nostrum, laborum enim harum hic esse sed totam asperiores impedit alias? Maiores distinctio natus, illo at accusantium veniam enim atque? Ipsum voluptate sint commodi totam maiores cumque!</p> </div> </div> </div> </div> </div> </section>

Answer 1

你可以这样做。 您可以将<p>和<h1>放在带有 display flex的div中

<div class="d-flex justify-content-between">
  <h1 class="text-center font-weight-bold font-size">What We Offer</h1>
  <p class="text-center lead">Lorem ipsum dolor sit amet consectetur 
   adipisicing elit.</p>
</div>

你可以调整 position 就像你想要https://getbootstrap.com/docs/4.3/utilities/flex/

Answer 2

<div class="d-flex flex-row justify-content-end">
  <h1>What We Offer</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>