搜索
搜索

Bootstrap 4上的导航栏问题

slivachuu 发表于 Dev
14
斯利瓦丘

我需要帮助解决问题。我想让徽标位于顶部导航栏的左侧，但每次尝试实现这一点都会破坏前端。

代码本身：

.top-line {
    border-bottom: 1px solid #cecece;
}

.top-line li {
    margin-top: 15px;
    margin-bottom: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
    <!-- CSS Bootstrap 4.5.2 -->

    <header>
        <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">

          <!-- One of the primary actions on mobile is to call a business - This displays a phone button on mobile only -->
          <div class="navbar-toggler-right">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
              aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          </div>

          <div class="collapse navbar-collapse flex-column" id="navbar">
            <ul class="navbar-nav justify-content-end top-line w-100 px-3">
              <img class="logo" src="https://svgshare.com/i/hqG.svg" alt="">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
            </ul>

            <ul class="navbar-nav justify-content-start w-100 bg-light px-3">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
            </ul>
          </div>
        </nav>
    </header>

请告诉我我该怎么做？提前感谢您的帮助！我还在学习，任何帮助都会很好。

这篇文章已经完全改变了，为了不同的任务。下面的评论不相关。

比普尔·贾什瓦尔

只需使用您的导航栏代码更改以下代码。

<nav class=" navbar navbar-expand-lg navbar-light bg-light fixed-top py-lg-0 ">
  
        <a class="navbar-brand" href="#">
  
            <!-- Add logo with size of 90*80 -->
            <img src="https://svgshare.com/i/hqG.svg"  alt="">
        </a>

              </div>

或者用您现有的代码替换整个修改后的代码

.top-line {
    border-bottom: 1px solid #cecece;
}

.top-line li {
    margin-top: 15px;
    margin-bottom: 15px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
    <!-- CSS Bootstrap 4.5.2 -->

    <header>
        <nav class=" navbar navbar-expand-lg navbar-light bg-light fixed-top py-lg-0 ">
  
    <a class="navbar-brand" href="#">
  
        <!-- Add logo with size of 90*80 -->
        <img src="https://svgshare.com/i/hqG.svg"  alt="">
    </a>

          </div>

          <div class="collapse navbar-collapse flex-column" >
            <ul class="navbar-nav justify-content-end top-line w-100 px-3">
             
              <li class="nav-   item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
            </ul>

            <ul class="navbar-nav justify-content-start w-100 bg-light px-3">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
            </ul>
          </div>
        </nav>
    </header>

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

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

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Bootstrap 4在导航栏中的悬停问题

Bootstrap 导航栏问题

Angular + Bootstrap 导航栏问题

Bootstrap 侧导航栏问题

ReactJS Bootstrap 导航栏问题

Bootstrap 导航栏格式问题

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

Bootstrap 4内容和导航侧栏重叠问题

bootstrap 4导航栏仅在移动设备上粘

Bootstrap 4导航栏上的下拉菜单

如何更改bootstrap 4上的导航栏悬停颜色？

Bootstrap 4导航栏在大屏幕上不崩溃

Bootstrap 4搜索导航栏未显示在移动设备上

Bootstrap 4-防止链接在导航栏上断线

Bootstrap 4导航栏始终在移动设备上可见

控制Bootstrap 4响应式导航栏上的环绕

Bootstrap 4垂直导航栏

使导航栏居中：Bootstrap 4

bootstrap 4.0固定导航栏的对齐问题

Bootstrap导航栏-品牌/差距问题

Bootstrap导航栏背景颜色问题

悬停 Bootstrap 导航栏间隙问题

当我向下滚动Bootstrap 4时，搜索栏出现在导航栏上

使用 Bootstrap 4 在大屏幕上的导航药丸和小屏幕上的导航栏导航之间切换

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

在 Bootstrap 上更改导航栏的颜色

图标在 Bootstrap 导航栏上显得太小

Bootstrap 导航栏在移动设备上透明

在Bootstrap 4中调整导航栏

TOP 榜单

  1. 1

    材质UI垂直滑块。如何改变在垂直材料UI滑块导轨的厚度（反应）

  2. 2

    隐藏发件人没有短信PHP

  3. 3

    在Windows 7中无法删除文件（2）

  4. 4

    HttpClient中的角度变化检测

  5. 5

    Java Eclipse中的错误13，如何解决？

  6. 6

    Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

  7. 7

    在浏览器中请求URL时会发生什么？

  8. 8

    flask-admin 如何自定义删除按钮

  9. 9

    java io ioexception无法解析服务器地址解析器的响应

  10. 10

    jOOQ：在特定表中查找约束

  11. 11

    Flexbox CSS 对齐属性环境惰性？

  12. 12

    共享图像将路径放入地址

  13. 13

    加载Microsoft Visual菜单时出现问题

  14. 14

    Powerpoint-条形长度错误的堆积条形图

  15. 15

    应用发明者仅从列表中选择一个随机项一次

  16. 16

    在Angular2中的输入值之前添加加号“ +”

  17. 17

    检查errno！= EINTR：这是什么意思？

  18. 18

    ClickHouse 创建临时表

  19. 19

    ggplot：对齐多个分面图-所有大小不同的分面

  20. 20

    Azure VM启动/停止日志

  21. 21

    是否可以通过编程方式对很多动画进行重新着色？

热门标签

归档