【问题标题】:bootstrap carousel / responsive menu引导轮播/响应式菜单
【发布时间】:2015-08-06 21:29:15
【问题描述】:

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

【问题讨论】:

  • :) 没有任何代码行我们如何验证?
  • 您缺少主菜单的关闭 &lt;/div&gt; 标记。添加它应该没问题
  • 还是同样的问题

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


【解决方案1】:

我认为您在轮播中放置了导航栏。 请把它们分开。 例如。

<nav>
 ... yuor nav code
</nav>

<div class="carousel">
  ... your carousel code
</div>

【讨论】:

    【解决方案2】:

    您缺少主菜单的结束 &lt;/div&gt; 标记:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-10-10
      • 1970-01-01
      • 2021-02-04
      • 2014-03-10
      • 1970-01-01
      • 2020-09-19
      相关资源
      最近更新 更多