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

【问题标题】：Not Able to Align div to the right in bootstrap无法在引导程序中将 div 向右对齐
【发布时间】：2022-01-20 23:55:07
【问题描述】：

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

【问题讨论】：

您的代码有什么问题？它似乎对我有用jsfiddle.net/onbqevm1
空容器元素是怎么回事？通常容器不应该嵌套。
以全屏模式查看我从您的 sn-p 创建的演示。您的列确实向右移动，但仅针对您指定的断点。您还没有解决较小的屏幕问题。答案取决于您告诉我们您希望列在移动设备上的行为方式。请修改以更清楚。查看grid docs，以便您了解所有相关概念。
在更仔细的阅读中，我怀疑您希望图标列首先按垂直顺序排列，然后按水平顺序排列。再次，请澄清。

标签： html css bootstrap-4

【解决方案1】：

你可以这样做。您可以将<p> 和<h1> 放在div 中，并显示flex

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

您可以随意调整位置 https://getbootstrap.com/docs/4.3/utilities/flex/

【讨论】：

没有必要从柱状布局进行重组。

【解决方案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>

【讨论】：

没有必要从柱状布局进行重组。
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
虽然这段代码可以回答这个问题，但最好在不介绍其他代码的情况下解释它是如何解决问题的，以及为什么要使用它。从长远来看，纯代码的答案没有用处。