在我的网页上有一个响应式下拉菜单(3行)和Bootstrap轮播。在移动设备上,当图像滑动时,看起来这三行的菜单也在滑动。有谁知道为什么会这样?
这是菜单
<div class="row row-menu fixed-nav">
<div class="container">
<div class="col-md-2 col-sm-2 col-xs-12 logo">
<a href="index.php" class="pull-left logo"><img src="images/crow_logo_152x51.png" alt=""></a>
<div class="mainmenu-showmenu-button pull-right">
<a onclick="$('.mainmenu li.active').has('.flyout').toggleClass('active').find('flyout').toggle(0);$('.mainmenu').slideToggle(100);" href="Javascript:return void(0);">
<div class="lines">
<span></span>
<span></span>
<span></span>
</div>
</a>
</div> <!--/.mainmenu-showmenu-button-->
</div>
<div class="col-md-8 col-xs-12 col-sm-8 col-mainmenu">
<ul class="mainmenu">
<li>
<a href="about.php" title="About" class="menufont">Despre</a>
</li>
<li>
<a href="<?=$lang;?>/service/services.html" title="Software and services" class="mainmenulink menufont menu">
<span class="text">Servicii & Soluții</span>
<span class="arrow"></span>
</a>
<div class="flyout container" style="display:none;">
<div class="submenu">
<ul class="col-md-3 col-sm-6 col-xs-12">
<li class="submenutitle">Business</li>
<li>
<a href="consult.php" title="Accounting">Consultanță IT</a>
</li>
<li>
<a href="management.php" title="Payroll and HRM">Managementul Relațiilor cu Clienții</a>
</li>
<li><a href="enterprise.php" title="Invoicing">Enterprise Content Management</a></li>
<li><a href="business.php" title="Debt collection">Business Intelligence</a></li>
<li><a href="integration.php" title="CRM">Integrarea Aplicațiilor Întreprinderii</a></li>
<li><a href="enterprise-resource.php" title="Procurement">Enterprise Resource Planning</a></li>
<li><a href="cloud.php" title="Procurement">Cloud Computing</a></li>
<!-- <li><a href="<?=$lang;?>/service/services.html" title="Procurement">Servicii</a></li> -->
</ul>
</div>
</div>
</li>
<li>
<a href="cariera.php" title="Careers" class="menufont">Carieră</a>
</li>
<li>
<a href="press-center.php" title="Press Center" class="menufont">Centru de Presă</a>
</li>
<li>
<a href="contact.php" title="Contacte" class="menufont">Contacte</a>
</li>
</ul>
</div>
</div> <!--/.row row-menu-->
这是旋转木马
<div class="carousel slide carousel-fade" data-ride="carousel" id="carousel-block">
<div class="carousel-inner">
<div class="item slide active" style="background-image: url('images/slideshow/business.jpg')">
<article class="carouselarticle">
<div class="carouseltxt overlay bg-blue txt-white cta-white">
<header>
<h3 class="bg-blue text-small">Soluții și servicii pentru afacerea dumneavoastră</h3>
</header>
<span>
<p>EnCrow vă poate ajuta în găsirea celor mai bune soluții pentru companie</p>
</span>
<a href="service-business.php" class="cta" title="See our accounting solutions" onclick="_gaq.push(['_trackEvent', 'StartPage_CTA_See our accounting solutions', 'accounting software and services']);" target="_top">
<p class="p8">Soluțiile și Serviciile Noastre Business</p>
</a>
</div>
</article>
</div> <!--/.item-->
<div class="item slide" style="background-image: url('images/slideshow/sectoare.jpg')">
<article class="carouselarticle">
<div class="carouseltxt overlay bg-pink">
<header>
<h3 id="header_nr2" class="text-medium">Soluții și aplicații pentru industrii</h3>
</header>
<span>
<p>Soluțiile noastre pentru industrii vor satisface așteptările clienților dumneavoastră</p>
</span>
<a href="services-sectoare.php" class="cta" title="Payroll" onclick="_gaq.push(['_trackEvent', 'StartPage_CTA_Payroll', 'Payroll front page']);" target="_top">
<p class="p8">Soluții și Aplicații pentru Industrii</p>
</a>
</div>
</article>
</div> <!--/.item-->
<div class="item slide" style="background-image: url('images/slideshow/web.jpg')">
<article class="carouselarticle">
<div class="carouseltxt overlay bg-orange txt-white cta-white">
<header>
<h3 id="header_nr3" class="text-medium">Dezvoltare web și soluții web-orientate</h3>
</header>
<span>
<p>Experiența noastră asigură realizarea calitativă a proiectelor</p>
</span>
<a href="dezvoltare-web.php" class="cta" title="Retail" onclick="_gaq.push(['_trackEvent', 'StartPage_CTA_Retail', 'Retail IT solutions']);" target="_top">
<p class="p8">Dezvoltare și Soluții Web </p>
</a>
</div>
</article>
</div> <!--/.item-->
<div class="item slide" style="background-image: url('images/slideshow/mobil.jpg')">
<article class="carouselarticle">
<div class="carouseltxt overlay bg-violet">
<header>
<h3 id="header_nr4" class="text-medium">Dezvoltare de aplicații și soluții mobile</h3>
</header>
<span>
<p>Dezvoltăm aplicații mobile de care ai nevoie la cele mai înalte standarde</p>
</span>
<a href="dezvoltare-mobila.php" class="cta" title="Retail" onclick="_gaq.push(['_trackEvent', 'StartPage_CTA_Retail', 'Retail IT solutions']);" target="_top">
<p class="p8">Aplicații și Soluții Mobile</p>
</a>
</div>
</article>
</div>
</div> <!--/.carousel-inner-->
</div> <!--/.carousel slide-->
<div class="container startpage-flex-control">
<ul class="nav startpage-flex-control-nav" id="carousel-block-buttons">
<li class="active" data-target="#carousel-block" data-slide-to="0">
<a data-toggle="tab" href="#"><span>Business</span></a>
</li>
<li data-target="#carousel-block" data-slide-to="1">
<a data-toggle="tab" href="#"><span>Sectoare</span></a>
</li>
<li data-target="#carousel-block" data-slide-to="2">
<a data-toggle="tab" href="#"><span>Dezvoltare Web</span></a>
</li>
<li data-target="#carousel-block" data-slide-to="3">
<a data-toggle="tab" href="#"><span>Dezvoltare Mobila</span></a>
</li>
</ul> <!--/.nav nav-justified-->
</div>
答案 0 :(得分:0)
我认为你已将导航栏放在旋转木马内。 请把它们分开。 例如
<nav>
... yuor nav code
</nav>
<div class="carousel">
... your carousel code
</div>
答案 1 :(得分:0)
您缺少主菜单的结束</div>
标记:
<div class="row row-menu fixed-nav">
<div class="container">
<div class="col-md-2 col-sm-2 col-xs-12 logo">
<a href="index.php" class="pull-left logo"><img src="images/crow_logo_152x51.png" alt=""></a>
<div class="mainmenu-showmenu-button pull-right">
<a onclick="$('.mainmenu li.active').has('.flyout').toggleClass('active').find('flyout').toggle(0);$('.mainmenu').slideToggle(100);" href="Javascript:return void(0);">
<div class="lines">
<span></span>
<span></span>
<span></span>
</div>
</a>
</div> <!--/.mainmenu-showmenu-button-->
</div>
<div class="col-md-8 col-xs-12 col-sm-8 col-mainmenu">
<ul class="mainmenu">
<li>
<a href="about.php" title="About" class="menufont">Despre</a>
</li>
<li>
<a href="<?=$lang;?>/service/services.html" title="Software and services" class="mainmenulink menufont menu">
<span class="text">Servicii & Soluții</span>
<span class="arrow"></span>
</a>
<div class="flyout container" style="display:none;">
<div class="submenu">
<ul class="col-md-3 col-sm-6 col-xs-12">
<li class="submenutitle">Business</li>
<li>
<a href="consult.php" title="Accounting">Consultanță IT</a>
</li>
<li>
<a href="management.php" title="Payroll and HRM">Managementul Relațiilor cu Clienții</a>
</li>
<li><a href="enterprise.php" title="Invoicing">Enterprise Content Management</a></li>
<li><a href="business.php" title="Debt collection">Business Intelligence</a></li>
<li><a href="integration.php" title="CRM">Integrarea Aplicațiilor Întreprinderii</a></li>
<li><a href="enterprise-resource.php" title="Procurement">Enterprise Resource Planning</a></li>
<li><a href="cloud.php" title="Procurement">Cloud Computing</a></li>
<!-- <li><a href="<?=$lang;?>/service/services.html" title="Procurement">Servicii</a></li> -->
</ul>
</div>
</div>
</li>
<li>
<a href="cariera.php" title="Careers" class="menufont">Carieră</a>
</li>
<li>
<a href="press-center.php" title="Press Center" class="menufont">Centru de Presă</a>
</li>
<li>
<a href="contact.php" title="Contacte" class="menufont">Contacte</a>
</li>
</ul>
</div>
</div>
</div> <!--/.row row-menu-->