bootstrap4在左侧对齐导航栏项目

先生

我正在使用Bootstrap 4版本的Bootstrap导航栏,但在左侧对齐导航栏项目时遇到问题,因为我在右侧有一些项目,并且我想将配置文件头像拉到左侧,我尝试使用[向左拉]和[ml-auto]却不起作用,所以有什么帮助吗?

导航栏代码:-

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark shadow p-3 mb-5" style="direction: rtl; margin:0;">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="styles/images/svgtopng.png" alt="" width="65" height="" class="d-inline-block align-top mr-auto"><span style="font-family: hana;">المتجر المتعدد</span></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <div class="navbar-inner" style="float:right">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item" style="font-family: cocon-next-arabic; font-size:26px;">
            <a class="nav-link active pull-right" aria-current="page" style="direction: rtl;" href="index.php">الرئيسية<img src="styles/images/home.png" alt="" width="66" height="47" class="d-inline-block align-top mr-auto"></a>
          </li>
          <li class="nav-item" style="font-family: cocon-next-arabic; font-size:26px;">
            <a class="nav-link active pull-right" aria-current="page" style="direction: rtl;" href="store.php">المتجر<img src="styles/images/cart.png" alt="" width="66" height="47" class="d-inline-block align-top mr-auto"></a>
          </li>
          <li class="nav-item" style="font-family: cocon-next-arabic; font-size:26px;">
            <a class="nav-link active pull-left" aria-current="page" style="direction: rtl;" href="store.php">Pull Left<img src="styles/images/cart.png" alt="" width="66" height="47" class="d-inline-block align-top mr-auto"></a> 
          </li>
        </ul>
      </div>
      </ul>
    </div>
  </div>
</nav>

Roshan库马尔

我认为这就是您所需要的。

<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="direction:rtl">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto" style="direction:ltr; padding-right:40px">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <ul class="mr-auto navbar-nav">
        <li class="nav-item">
          <a href="#" class="nav-link" style="display:inline-block">Avator</a>
          <img style="display:inline-block; width:40px; height:40px; border-radius:50px" src="https://png.pngtree.com/png-vector/20190223/ourmid/pngtree-vector-avatar-icon-png-image_695765.jpg" />
        </li>
      </ul>
    </div>
  </nav>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>

</html>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Bootstrap导航栏右对齐按钮

来自分类Dev

Bootstrap Center导航栏项目

来自分类Dev

Twitter Bootstrap 3.0.3导航栏对齐导航栏标题

来自分类Dev

Bootstrap 4:徽标增加导航栏高度时,垂直对齐导航链接

来自分类Dev

如何将bootstrap4导航栏转换为移动侧栏?

来自分类Dev

引导导航栏徽标在中心,项目在左侧和右侧

来自分类Dev

Bootstrap 4导航栏项目文本换行问题

来自分类Dev

Bootstrap 4-将导航栏项目向右对齐

来自分类Dev

Bootstrap 4导航栏右对齐搜索选项以及注册

来自分类Dev

Bootstrap4导航栏切换无法正常工作

来自分类Dev

在网站的不同div上滚动时,使Bootstrap4导航栏更改颜色

来自分类Dev

在Flexbox导航栏中对齐项目

来自分类Dev

Twitter Bootstrap 3.0.3导航栏对齐导航栏标题

来自分类Dev

Bootstrap导航栏中心项目

来自分类Dev

在Bootstrap导航栏的中心对齐文本

来自分类Dev

在导航栏中对齐项目

来自分类Dev

Bootstrap导航栏右侧落在左侧下方

来自分类Dev

在Bootstrap 4中更正导航栏链接的垂直对齐

来自分类Dev

Bootstrap 4,所有导航栏项目正确

来自分类Dev

我想在不使用 Bootstrap 的情况下对齐导航栏中的项目

来自分类Dev

Bootstrap 4 Beta 2 - 导航栏:右对齐不折叠

来自分类Dev

导航栏中的 bootstrap 4 按钮对齐

来自分类Dev

导航栏的 Bootstrap 对齐中心折叠项目

来自分类Dev

Bootstrap 4 导航栏不显示导航栏项目

来自分类Dev

将导航栏品牌和导航项目放在 Bootstrap 4 导航栏中的不同行

来自分类Dev

Bootstrap:在导航栏中对齐导航

来自分类Dev

即使不需要,元素也会在 bootstrap4 导航栏中折叠

来自分类Dev

将 Bootstrap 4 导航栏链接对齐到底部

来自分类Dev

Bootstrap4 导航栏 - 间距元素(右、中、左)

Related 相关文章

  1. 1

    Bootstrap导航栏右对齐按钮

  2. 2

    Bootstrap Center导航栏项目

  3. 3

    Twitter Bootstrap 3.0.3导航栏对齐导航栏标题

  4. 4

    Bootstrap 4:徽标增加导航栏高度时,垂直对齐导航链接

  5. 5

    如何将bootstrap4导航栏转换为移动侧栏?

  6. 6

    引导导航栏徽标在中心,项目在左侧和右侧

  7. 7

    Bootstrap 4导航栏项目文本换行问题

  8. 8

    Bootstrap 4-将导航栏项目向右对齐

  9. 9

    Bootstrap 4导航栏右对齐搜索选项以及注册

  10. 10

    Bootstrap4导航栏切换无法正常工作

  11. 11

    在网站的不同div上滚动时,使Bootstrap4导航栏更改颜色

  12. 12

    在Flexbox导航栏中对齐项目

  13. 13

    Twitter Bootstrap 3.0.3导航栏对齐导航栏标题

  14. 14

    Bootstrap导航栏中心项目

  15. 15

    在Bootstrap导航栏的中心对齐文本

  16. 16

    在导航栏中对齐项目

  17. 17

    Bootstrap导航栏右侧落在左侧下方

  18. 18

    在Bootstrap 4中更正导航栏链接的垂直对齐

  19. 19

    Bootstrap 4,所有导航栏项目正确

  20. 20

    我想在不使用 Bootstrap 的情况下对齐导航栏中的项目

  21. 21

    Bootstrap 4 Beta 2 - 导航栏:右对齐不折叠

  22. 22

    导航栏中的 bootstrap 4 按钮对齐

  23. 23

    导航栏的 Bootstrap 对齐中心折叠项目

  24. 24

    Bootstrap 4 导航栏不显示导航栏项目

  25. 25

    将导航栏品牌和导航项目放在 Bootstrap 4 导航栏中的不同行

  26. 26

    Bootstrap:在导航栏中对齐导航

  27. 27

    即使不需要,元素也会在 bootstrap4 导航栏中折叠

  28. 28

    将 Bootstrap 4 导航栏链接对齐到底部

  29. 29

    Bootstrap4 导航栏 - 间距元素(右、中、左)

热门标签

归档