Bootstrap 引导程序3导航栏-导航栏标题问题

yvt65v4c  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(195)

我已经建立了这个导航栏（与Bootstrap 3），这是做的风格要求。在建立它，并被告知它测试良好（并部署到生产）有人意识到，导航栏标题（标志）是不是一个可点击的链接。

我意识到这是因为我为navbar-header类设置了一个CSS样式height:0。我的问题是，我试图做的一切来修复它（比如明显地删除了height：0），然后破坏了布局。
此外-导航栏标题类的问题只存在于桌面或L\XL屏幕尺寸上。当导航栏折叠时（移动\平板电脑），导航栏标题徽标是预期的可点击链接。
有人能建议一些hacky CSS来解决这个问题吗？请注意-我已经更改了导航崩溃时的断点，但这不在此代码中。
我没有粘贴代码，而是为它创建了一个小提琴;
https://jsfiddle.net/BlissSol/8s6xn2vt/3/
编辑--对于那些不认为有问题的人，扩大小提琴视图的宽度，使其至少为1222px宽。因此，在1920x1080的屏幕上，小提琴最终看起来像这样：

如果视图比这个小，你会看到徽标可以点击。
下面是CSS代码：

<style>
        html {
            font-size: initial;
            padding: initial;
        }

        img {
            max-width: 180px;
        }
       

        .container-fluid {
            max-width: 1440px;
        }

        .dropdown:hover > .dropdown-menu {
            display: block;
        }

        .dropdown > .dropdown-data-toggle:active {
            pointer-events: none;
        }

        .drop-nav {
            margin-top: 3px;
        }

        .fa-person {
            line-height: 0.5em !important;
        }
         
        body {
             font-family: Montserrat,sans-serif;
        }
        
        /* NEW */
        .ceda-nav-border {
            border-bottom: 1px solid #e11837;
            background-color: #fff;
        }

        a:hover {
            color: #252932;
            text-decoration: none;
        }
        
        .nav-link { 
            padding-left: 1.25rem;
            padding-right: 1.25rem;
            font-size: .875rem;
            font-weight: 600;
            line-height: 2rem;
            color: #252932;
        }

        .padding-menu-top {
            padding-top: .30rem;
            padding-bottom: .30rem;
        }

        .padding-menu-bottom {
            padding-top: .20rem;
        }

        .navbar-default .navbar-nav > li > a {
            color: #252932;
        }

        .navbar-nav > li > a {
            line-height: 22px;
        }

        .li .nav-item {
            font-size: .875rem;
            color: #000;
            line-height: 2rem;
        }

        .dropdown-item {
            color:#252932;
            padding: 5px;
            width: 100%; 
            white-space: nowrap;
            background-color: transparent;
            padding: 1.25rem 1.5rem;
        }

        .dropdown-divider {
            margin-bottom: .75rem !important;
            margin-top: .75rem !important;
            background-color: transparent !important;
            overflow: hidden;
            border-top: 1px solid #e9ecef;
        }

        .dropdown .dropdown-menu a {
            font-weight: 600;
            font-size: .875rem;
        }

        .navbar-header {
            height: 0px;
        }

        .dropdown .dropdown-menu a:hover:before {
            border-radius: 10px;
            width: 10px;
            height: 10px;
            background-color: rgba(225,24,55,1);
            color: #e11837;
            content: "";
            display: inline-block;
            margin-right: 7px;
        }

        .dropdown-menu {
            border-top: 4px solid #e11837 !important;
            /* margin-top: 14px !important; */
            padding: .5rem 0;
            margin: .125rem 0 0;
            min-width: 10rem;
            top: 100%;
            left: 0;
            z-index: 1000;
            display: none;
            font-size: 1rem;
            border-radius: 0 !important;
        }

        .top-menu {
            /* margins for dropdown-menu */
            margin-top: -3px !important;
        }

        .bottom-menu {
            /* margins for dropdown-menu */
            margin-top: 14px !important;
        }

        .align-middle {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .w-105 {
            width: 105%;
        }

        .small-row {
            height: 33px;
        }

        .large-row {
            height: 55px;
        }

        .w-100 {
            width: 100%;
        }

        .w-110 {
            width: 110%;
        }

        .w-120 {
            width: 120%;
        }

        .w-130 {
            width: 130%;
        }

        .w-175 {
            width: 175%;
        }

        .w-185 {
            width: 185%;
        }

        .pb-4 {
            padding-bottom: 4px;
        }

        .pb-5 {
            padding-bottom: 5px;
        }

        .pt-2 {
            padding-top: .5rem;
        }

        .pl-2 {
            padding-left: .5rem;
        }

        .pr-2 {
            padding-right: .5rem;
        }

        .navbar-nav > li > .dropdown-menu {
            margin-top: 0px;
        }

        .navbar-nav > li > .dropdown-top-menu {
            margin-top: 0px;
        }

        .navbar-default .navbar-toggle{
            border: none;
        }

        .navbar-default .navbar-toggle .icon-bar {
            background-color: black;
        }

        .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
            background-color: #fff;
        }

        .join-ceda, .support-ceda {
            padding-right: 7px;
        }

        .navbar-default .navbar-nav > li > a:hover {
            color:#000 !important;
        }

        .breadcrumb > li a {
            color: black;
        }

        .footer {
            position: relative !important;
        }

        @media (max-width: 1199px) {
            .navbar-header {
                float: none;
            }
            .navbar-left,.navbar-right {
                float: none !important;
            }
            .navbar-toggle {
                display: block;
            }
            .navbar-collapse {
                border-top: 1px solid transparent;
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
            }
            .navbar-collapse.collapse {
                 display: none!important; 
            } 
            .collapse.in{
                display:block !important;
            }
            .navbar-nav {
                float: none!important;
                margin-top: 7.5px;
            }
            .navbar-nav>li>a {
                padding-top: 10px;
                padding-bottom: 10px;
            }
            .navbar-nav>li {
                float: none;
            }
            .navbar-brand {
                padding: 10px 25px;
            }
            .ceda-logo {
                max-width: 110px;
            }

            .navbar-collapse {
                margin-top: 50px;
            }

            .navbar-nav {
                margin: 0px;
            }
            .cedaMenuCarot {
                display: block;
                position: absolute;
                right: 12px;
                top: 13px;
            }
            .nav-item {
                padding-left: .75rem;
                padding-right: .75rem;
            }
           
            .dropdown-menu {
                white-space: normal;
                border: 0 !important;
                border-radius: 0 !important;
                box-shadow: 0 0px 0px rgb(0 0 0 / 18%);
                margin-top: 4px !important;
                padding: .5rem 0;
            }
            .navbar-nav .dropdown-menu {
                position: static;
                float: none;
            }
            .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
                color: #252932;
                background-color: #fff;
            }
        }
        
    </style>

下面是HTML：

<div class="container-fluid" style="background-color: #fff;">
    <nav class="navbar navbar-default navbar-expand-md navbar-fixed-top ceda-nav-border">
      <div class="container-fluid clearfix">
        
            <!-- Brand/logo -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarCollapse" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img class="ceda-logo" src="https://events.ceda.com.au/App_Themes/CEDA2020/ceda-logo.png" alt="CEDA Logo">
                </a>
            </div>
            
            <!-- Large screen Navbar -->
            <div class="collapse navbar-collapse collapse" id="navbarCollapse">
                <div class="row visible-lg-block">
                    <div class="col-lg-12 col-12 small-row align-middle">
                        <ul class="navbar-nav float-none pull-right list-unstyled ceda-nav-border">
                            <li class="nav-item padding-menu-top" style="background-color: #A5BB29;">
                                <a class="nav-link" href="#"><img src="i-ceda.svg" class="join-ceda">Join CEDA</a>
                            </li>
                            <li class="nav-item dropdown padding-menu-top">
                                <a class="nav-link dropdown-toggle" href="#"><i class="fa fa-user fa-lg pr-2 pl-2" aria-hidden="true"></i>Sign in</a>
                                <div class="dropdown-menu top-menu w-185" aria-labelledby="navbarDropdownMenuLink">
                                    <a class="dropdown-item" href="#">My details</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">My event registrations</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">My support cases</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">My invoices</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">My corporate tables</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Company profile</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Company invoices</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Company staff details</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Company membership</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">company corporate tables</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Sign out</a>
                                </div>
                            </li>
                            <li class="nav-item padding-menu-top">
                                <a class="nav-link" href="#"><img src="i-support.svg" class="support-ceda">Support us</a>
                            </li>
                            <li class="nav-item padding-menu-top">
                                <a class="nav-link" href="#"><i class="fa fa-phone fa-lg pr-2 pl-2" aria-hidden="true"></i>Contact</a>
                        </ul>
                    </div>
                <div class="col-lg-12 col-12 large-row align-middle">
                    <ul class="navbar-nav float-none pull-right list-unstyled">
                        <li class="nav-item dropdown padding-menu-bottom">
                            <a class="nav-link dropdown-toggle" href="https://www.ceda.com.au/research-and-policy">Research and policy</a>
                            <div class="dropdown-menu bottom-menu w-120" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="https://www.ceda.com.au/research-and-policy/Current-research-focus">Current research focus</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="https://ceda.com.au/ResearchAndPolicies/Research">Research</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="https://ceda.com.au/research-and-policy/Pulse-polling-survey">Pulse polling surveys</a>
                            </div>
                        </li>

                        <li class="nav-item padding-menu-bottom">
                            <a class="nav-link" href="http://ceda.com.au/Membership">Membership</a>
                        </li>
                        <li class="nav-item dropdown padding-menu-bottom">
                            <a class="nav-link dropdown-toggle" href="https://www.ceda.com.au/Learning">CEDA Learning</a>
                            <div class="dropdown-menu bottom-menu w-185" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="https://www.ceda.com.au/Learning/Public-Policy-Dynamics">Public Policy Dynamics</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="https://www.ceda.com.au/Learning/Copland-Leadership-Program">Copland Leadership Program</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown padding-menu-bottom">
                            <a class="nav-link dropdown-toggle" href="https://www.ceda.com.au/EventsAndPrograms">Events and programs</a>
                            <div class="dropdown-menu bottom-menu w-100" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" >Upcoming events</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" >Past events</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="https://www.ceda.com.au/ResearchAndPolicies/Research/Economy/environmental-social-and-governance">ESG Community</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown padding-menu-bottom">
                            <a class="nav-link dropdown-toggle" href="https://www.ceda.com.au/News-and-resources">News and resources</a>
                            <div class="dropdown-menu bottom-menu w-105" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="https://ceda.com.au/News-and-resources/News">News</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="https://ceda.com.au/News-and-resources/MediaReleases">Media release</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="https://ceda.com.au/News-and-resources/Opinion">Opinion articles</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="https://ceda.com.au/News-and-resources/Podcasts">Podcasts</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="https://ceda.com.au/News-and-resources/MediaMentions">Media mentions</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="https://ceda.com.au/News-and-resources/VideosAndPhotos">Videos and photos</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown padding-menu-bottom">
                            <a class="nav-link dropdown-toggle" href="https://www.ceda.com.au/About">About</a>
                            <div class="dropdown-menu bottom-menu w-105" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="https://www.ceda.com.au/About/Our-Story">Our Story</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="https://ceda.com.au/About/Our-People">Our People</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="https://www.ceda.com.au/About/Annual-reports">Annual Reports</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://www.ceda.com.au/SearchResult"><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- Mobile\tablet device navbar -->
            <div class="hidden-lg">
                <!--<div id="navbar" class="nav navbar-collapse collapse in" aria-expanded="true">-->
                <ul class="nav navbar-nav list-unstyled ceda-nav-border pb-5">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#">Research and policy</a>
                        <i class="fa fa-caret-down fa-2x cedaMenuCarot" role="button" aria-hidden="true" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="navbarDropdownMenuLink"></i>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="https://www.ceda.com.au/research-and-policy/Current-research-focus">Current research focus</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="https://ceda.com.au/ResearchAndPolicies/Research">Research</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="https://ceda.com.au/research-and-policy/Pulse-polling-survey">Pulse polling surveys</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Membership</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#">CEDA Learning</a>
                        <i class="fa fa-caret-down fa-2x cedaMenuCarot" role="button" aria-hidden="true" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="navbarDropdownMenuLink"></i>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="https://www.ceda.com.au/Learning/Public-Policy-Dynamics">Public Policy Dynamics</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="https://www.ceda.com.au/Learning/Copland-Leadership-Program">Copland Leadership Program</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#">Events and programs</a>
                        <i class="fa fa-caret-down fa-2x cedaMenuCarot" role="button" aria-hidden="true" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="navbarDropdownMenuLink"></i>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" >Upcoming events</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" >Past events</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="https://www.ceda.com.au/ResearchAndPolicies/Research/Economy/environmental-social-and-governance">ESG Community</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#">News and resources</a>
                        <i class="fa fa-caret-down fa-2x cedaMenuCarot" role="button" aria-hidden="true" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="navbarDropdownMenuLink"></i>
                        <div class="dropdown-menu w-105" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="https://ceda.com.au/News-and-resources/News">News</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="https://ceda.com.au/News-and-resources/MediaReleases">Media release</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="https://ceda.com.au/News-and-resources/Opinion">Opinion articles</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="https://ceda.com.au/News-and-resources/Podcasts">Podcasts</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="https://ceda.com.au/News-and-resources/MediaMentions">Media mentions</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="https://ceda.com.au/News-and-resources/VideosAndPhotos">Videos and photos</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#">About</a>
                        <i class="fa fa-caret-down fa-2x cedaMenuCarot" role="button" aria-hidden="true" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="navbarDropdownMenuLink"></i>
                        <div class="dropdown-menu w-105" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="https://www.ceda.com.au/About/Our-Story">Our Story</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="https://ceda.com.au/About/Our-People">Our People</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="https://www.ceda.com.au/About/Annual-reports">Annual Reports</a>
                        </div>
                    </li>
                </ul>
                <ul class="nav navbar-nav list-unstyled ceda-nav-border">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#">Sign in</a>
                        <i class="fa fa-caret-down fa-2x cedaMenuCarot" role="button" aria-hidden="true" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="navbarDropdownMenuLink"></i>
                        <div class="dropdown-menu w-105" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">My details</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">My event registrations</a>
                        </div>
                        
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><img class="join-ceda" src="i-ceda.svg">Join CEDA</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><img class="support-ceda" src="i-support.svg">Support us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-phone fa-lg pr-2" aria-hidden="true"></i>Contact</a>
                </ul>
                <!--</div>-->
            </div>
                
            </div>
        
        </div>
    </nav>
  </div>
twitter-bootstrap

1条答案

按热度按时间
7dl7o3gd

7dl7o3gd1#

我确实认为您存在容器/行嵌套问题，但无需重写所有内容，请执行以下操作：
更改此项：

<!-- Large screen Navbar -->
...
<div class="col-lg-12 col-12 small-row align-middle">
...
</div>
<div class="col-lg-12 col-12 large-row align-middle">
...
</div>

收件人：

<!-- Large screen Navbar -->
...
<div class="col-lg-8 col-12 small-row align-middle pull-right">
...
</div>
<div class="col-lg-8 col-12 large-row align-middle pull-right">
...
</div>

我唯一改变的是在navbar容器上使用更小的列col-lg-8，并使用helper类pull-right让它们向右浮动，这样它们就不会挡住您的<a href="#">徽标。
Updated fiddle

赞(0）分享  回复(0）举报  2022-12-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com