Question

它是一个引导代理登陆页面，导航栏在桌面视图和保持脱机的文件中正常运行。但是在在线版本中，导入栏在放入移动视图时不会缩小。

This is how the navbar should work in mobile view

导航条形码：

.navbar-default .navbar-brand {
    /*font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;
    color: #fed136;*/
}
.logo{
	position:fixed;
	/*size:10px;*/
	width:160pt;
	height:auto;
        padding-top: 10px;
	
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
    color: #fec503;
    
}

.navbar-default .navbar-collapse {
    border-color: rgba(255,255,255,.02);
}

.navbar-default .navbar-toggle {
    order-color: #C51D1D;
    background-color: #CA2222;
    /*top: 31px;*/
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #CA2222;
}
/* Drop down  */
#drop li ul li {
	border-top: 0px;
}

/*Navigation text*/
.navbar-default .nav li a {
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 100;
	font-size:15px;
    letter-spacing: 1px;
    color: #fff;
}

.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
    outline: 0;
    color: #009DF7;
}

.navbar-default .navbar-nav>.active>a {
    border-radius: 0;
    color: #fff;
    background-color: rgba(255, 0, 0, 0.66);
}

.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #fff;
    background-color: rgba(255, 0, 0, 0.66);
    padding-top: 15px;
}

@media(min-width:768px) {
    .navbar-default {
        padding: 25px 0;
        border: 0;
        background-color: transparent;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
    }

    .navbar-default .navbar-brand {
        font-size: 2em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .navbar-default .navbar-nav>.active>a {
        border-radius: 3px;
    }
	/*navigation color*/
    .navbar-default.navbar-shrink {
        padding: 3px;
        background-color: rgba(0, 0, 0, 0.57);
    }

    .navbar-default.navbar-shrink .navbar-brand {
        font-size: 2em;
    }

<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-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 page-scroll" href="#page-top"><img class="logo" width="80%" src="img/logos/U2.png" style="
    margin-top: -22px;
"></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 0px;">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden active">
                        <a href="#page-top"></a>
                    </li>
                    <li class="">
                        <a class="page-scroll" href="#services">Tandem skydiving</a>
                        
                    </li>
                   <li class="">
                        <a class="page-scroll" href="#learn">Learn to skydive</a>
                    </li>
                    <li class="">
                        <a class="page-scroll" href="#hubs">microlite and paragliding</a>
                    </li> 
                    <li class="">
                        <a class="page-scroll" href="#book">BOOK NOW</a>
                    </li>
                    <li class="">
                        <a class="page-scroll" href="#socialmedia">About us</a>
                    </li>
                    <!--<li>
                        <a class="page-scroll" href="#team">Team</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contactus">connect</a>
                    </li>-->
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

Answer 1

您只需使用Bootstrap CDN参考进行在线查找。此代码正在与CDN连接一起使用。所以请链接CDN bootstrap css和脚本。

Answer 2

此页http://iloveskydiving.in/coco上的问题是您缺少元视口。

<meta name="viewport" content="width=device-width, initial-scale=1">

查看此页面时：http://sky.promile.co/coco/（＆＃34;原始＆＃34;一个iframe拉取其内容的地方）它正常工作。您还需要将元标记添加到第一页的代码中。（为什么顺便使用iframe？）

Bootstrap导航栏在移动视图中不会缩小

2 个答案: