我有一个导航栏已经建立了一个Angular 的网站，这是使用Bootstrap 4，它看起来像这个

我试图复制这个导航栏设计的另一个网站，这是使用引导3。我最初看了看，如果我可以只是一些CSS从引导4版本，使它能够与版本3，但这被证明是一个头痛，所以我只是认为我从头开始。
这是我目前所拥有的Bootstrap 3版本，但我正在努力修复列定位。

有谁能提出一个建议，固定的位置2列在引导3，使它看起来非常相似的引导4版本？我也有一个问题与崩溃（移动的视图导航）不工作的atm。

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

        img {
            max-width: 180px;
            /* width: 100%;
            height: auto; */
        }
       

        .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;
             /* line-height: 1.5; */
        }
        
        /* NEW */
        .ceda-nav-border {
            border-bottom: 1px solid #e11837;
        }

        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;
        }
        
        .nav-item {
            list-style-type: none;
            
        }

        .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: 0.25rem 1.5rem;
        }

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

        .dropdown .dropdown-menu a {
            /*padding: 1rem; */
            font-weight: 600;
            font-size: .875rem;
        }

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

        .w-105 {
            width: 105%;
        }

.w-110 {
    width: 110%;
}

.w-120 {
    width: 120%;
}

.w-130 {
    width: 130%;
}

.w-175 {
    width: 175%;
}

.w-185 {
    width: 185%;
}
        
        
    </style>

  </head>

  <!-- body -->
  <body class="">
 
<div class="ceda-nav-border">
  <div class="container-fluid" style="background-color: #fff;>
    <nav class="navbar navbar-light navbar-expand-md">
      <div class="container-fluid clearfix">
        
            <!-- Brand/logo -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-1" aria-expanded="false">
                    <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" id="example-1">
                <div class="row">
                <div class="col-lg-12 col-12">
                    <ul class="navbar-nav float-none pull-right">
                        <li class="nav-item" style="background-color: #A5BB29;">
                            <a class="nav-link active" href="#">Join CEDA</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Sign in</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Support us</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                    </ul>
                </div>
                <div class="col-lg-12 col-12">
                    <ul class="navbar-nav float-none pull-right">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#">Research and policy</a>
                            <div class="dropdown-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">
                            <a class="nav-link" href="#">Membership</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#">CEDA Learning</a>
                            <div class="dropdown-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">
                            <a class="nav-link dropdown-toggle" href="#">Events and programs</a>
                            <div class="dropdown-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">
                            <a class="nav-link dropdown-toggle" href="#">News and resources</a>
                            <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>
                            <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>
                </div>
            </div>
                
            </div>
        
        </div>
    </nav>
  </div>
  </div>

1条答案

按热度按时间

cdmah0mi1#

首先，您在<div class="container-fluid" style="background-color: #fff;>处缺少一个引号。添加它（... #fff"）已经产生了以下视图：

但是，视图取决于页面的宽度：一旦宽度太小，品牌就会破坏布局。这是由第二个导航栏中的项目数量和品牌徽标造成的。减少这种影响的一个肮脏的解决方法是将徽标的height定义为1px，如<a class="navbar-brand" href="#" style="height: 1px;">。结果如下所示：

关于移动的导航栏：折叠按钮不可见，即使它存在，请参见此处：

您可以添加：

.icon-bar {
    background: black;
}

它会被显示出来。它也是有效的：

出于测试的目的，我创建了一个fiddle。也许这有助于进一步调整解决方案。
祝你好运！

赞(0）回复(0）举报 2022-12-07

Bootstrap 3导航栏(2列)

1条答案

相关问题

热门标签

最新问答