bootstrap carousel /响应式菜单

时间:2015-08-06 12:27:19

标签: html twitter-bootstrap drop-down-menu

enter image description here

在我的网页上有一个响应式下拉菜单(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>

2 个答案:

答案 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-->