在 Bootstrap 中重新定位导航栏折叠上的项目 [英] Re-positioning items on navbar collapse in Bootstrap

查看：13
本文介绍了在 Bootstrap 中重新定位导航栏折叠上的项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在为网页设计导航栏.我能够制作一个导航栏，数据左右对齐，品牌在中心.但是，当导航栏折叠时，项目的对齐方式变为左(上)品牌(上)右.我希望品牌保持领先，其他项目崩溃.

这是我的代码:

<头><script src="https://code.jquery.com/jquery-3.3.1.min.js"integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjPVCUar5"7xSfFWpi1MquVdAyjPVCUar5<6/脚本><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcFAgWiGinGinAmXmFcFAGWiGinGinA><身体><header class="sticky-top"><nav class="navbar navbar-expand-lg navbar-toggleable-md navbar-dark bg-primary"><div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2"><ul class="navbar-nav mr-auto"><li class="nav-item home"><a class="nav-link" href="/">首页</a><li class="nav-item about"><a class="nav-link" href="/about">关于</a>

<div class="mx-auto order-0"><a class="navbar-brand mx-auto" href="/">Brand</a>

<div class="navbar-collapse collapse w-100 order-3 dual-collapse2"><ul class="navbar-nav ml-auto"><li class="nav-item"><a class="nav-link" href="#">登录</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2"><span class="navbar-toggler-icon"></span></nav></标题></html>

折叠功能在任何地方都能正常工作，除非使用 chrome 开发工具检查页面.在chrome dev tools中，显示的是上述顺序(左->品牌->右).这是 chrome 中的错误，还是我需要做一些额外的配置?

解决方案

像这样响应式地使用 order 类...

https://www.codeply.com/go/gRhjuLo4LF

<nav class="navbar navbar-expand-lg navbar-dark bg-primary"><div class="navbar-collapse collapse w-100 order-1 dual-collapse2"><ul class="navbar-nav mr-auto"><li class="nav-item home"><a class="nav-link" href="/">首页</a><li class="nav-item about"><a class="nav-link" href="/about">关于</a>

<div class="mx-auto order-0 order-lg-2"><a class="navbar-brand mx-auto" href="/">Brand</a>

<div class="navbar-collapse collapse w-100 order-3 dual-collapse2"><ul class="navbar-nav ml-auto"><li class="nav-item"><a class="nav-link" href="#">登录</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2"><span class="navbar-toggler-icon"></span></nav></标题>

I am working on a navbar for a webpage. I was able to make a navbar with data aligned left and right, and Brand in center. However, when the navbar collapses, the alignment of the items becomes Left (over) Brand (over) Right. I want the Brand to stay up at top and other items to collapse.

Here is my code:

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 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>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <header class="sticky-top">
    <nav class="navbar navbar-expand-lg navbar-toggleable-md navbar-dark bg-primary">
        <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item home">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item about">
                    <a class="nav-link" href="/about">About</a>
                </li>
            </ul>
        </div>
        <div class="mx-auto order-0">
            <a class="navbar-brand mx-auto" href="/">Brand</a>
        </div>
        <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Login</a>
                </li>
            </ul>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </nav>
</header>
</body>

</html>

The collapse functionality works fine everywhere except when the page is inspected using chrome dev tools. In chrome dev tools, the above-mentioned order is displayed (left->brand->right). Is this a bug in chrome, or I need to do some additional configuration?

解决方案

Use the order classes responsively like this...

https://www.codeply.com/go/gRhjuLo4LF

<header class="sticky-top">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="navbar-collapse collapse w-100 order-1 dual-collapse2">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item home">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item about">
                    <a class="nav-link" href="/about">About</a>
                </li>
            </ul>
        </div>
        <div class="mx-auto order-0 order-lg-2">
            <a class="navbar-brand mx-auto" href="/">Brand</a>
        </div>
        <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Login</a>
                </li>
            </ul>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </nav>
</header>

这篇关于在 Bootstrap 中重新定位导航栏折叠上的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆