问题新手 Boostrap5 |定位文本和徽标问题答案

【问题标题】：Question Newbie Boostrap5 | Positioning Text and Logo Problem问题新手 Boostrap5 |定位文本和徽标问题
【发布时间】：2023-01-04 01:48:03
【问题描述】：

我最近以极大的热情开始关注 Bootstrap 5 并开始观看教程。

In this tutorial 他正在右上角添加文字并在左上角放置徽标。我写了相同的代码，但在我的 index.html i did not get same result. 我错过了什么？

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

<!---------------------------------- TOPBAR ---------------------------------->
<div class="top-bar">
  <div class="container">
    <div class="col-8 pull-right">
      <p><a href="+188888888">Call Us For Maintence Quickly!</a></p>
    </div>
  </div>
</div>
<!--------------------------------------------------------------------------->

<!---------------------------------- NAVBAR ---------------------------------->
<nav class="navbar bg-light navbar-light navbar-expand-lg">
  <div class="container"></div>
  <a href="index.html" class="navbar-brand"><img src="https://dummyimage.com/500x145/000/fff" alt="LogoTitle"></a>
</nav>
<!--------------------------------------------------------------------------->

【问题讨论】：

标签： html css

【解决方案1】：

您似乎混淆了 Bootstrap v4 和 v5 类以及元素嵌套。对于顶部栏，您需要类似的内容：

<div class="col-8 align-self-end text-end">

如果您打算稍后向该容器添加其他列。但更好的选择可能是：

<div class="row-cols text-end">

对于导航栏，您的错误是元素在 .container 之外和之后。你想要：

<nav class="navbar">
  <div class="container">
    <a><img></a>
  </div>
</nav>

要么：

<nav class="navbar">
  <a><img></a>
  <div class="container"></div>
</nav>

...取决于您的追求。不过，这些都不是构建导航栏或容器的最佳方式。我强烈建议阅读 the documentation 了解第 5 版，因为它可能是更好的资源。请注意，您的教程适用于版本 4，它明显不同。

【讨论】：

【解决方案2】：

在容器 ex 中添加 a 元素：

 <nav class="navbar bg-light navbar-light navbar-expand-lg">
        <div class="container">
            <a href="index.html" class="navbar-brand">
               <img src="https://dummyimage.com/500x145/000/fff" alt="LogoTitle">
            </a>
        </div>
</nav>

【讨论】：