文章/答案/技术大牛

发布

社区首页 >问答首页 >新手Boostrap5定位文本与标志问题

问新手Boostrap5定位文本与标志问题
EN

Stack Overflow用户

提问于 2022-04-02 23:47:41

回答 2查看 35关注 0票数 0

最近，我以极大的热情主演boostrap5，并开始看教程。在本教程中，他是添加文字右角，并将标志左角。我写了同样的代码，但在我的index.html 我没有得到同样的结果。中，我遗漏了什么？

<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

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-04-03 00:23:06

您似乎混淆了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>

...depending关于你想要的东西。但是，这两种方法都不是构建导航条或容器的最佳方法。我强烈建议阅读版本5的文献资料，因为它可能是一个更好的资源。请注意，您的教程是针对版本4的，这是明显不同的。

票数 0

Stack Overflow用户

发布于 2022-04-03 00:32:19

在容器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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71721976

复制

相似问题

问新手Boostrap5定位文本与标志问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问新手Boostrap5定位文本与标志问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问新手Boostrap5定位文本与标志问题
EN