Question

我遇到Bootstrap的问题。我在一个网站上工作，一切都很完美，但移动设备中的导航栏存在问题。

在移动设备中悬停已损坏
导航栏在移动设备中没有全宽

守则

＆＃13;

<header id="header" class="header-main">
  <nav id="main-navbar" class="navbar navbar-default">
    <div class="container-fluid">
      <div class="col-xs-12 col-md-6 text-left">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="/">úvod</a></li>
              <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">ponuka <b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="ponuka-on-grid">On-Grid</a></li>
                  <li><a href="ponuka-hybridne-synchronne-zdroje">Hybridné synchrónne zdroje</a></li>
                  <li><a href="ponuka-off-grid">Off-Grid</a></li>
                </ul>
              </li>
              <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">elektromontáže <b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="elektromontaze-silnoprudove-zariadenia">Silnoprúdové zariadenia</a></li>
                  <li><a href="elektromontaze-slaboprudove-zariadenia">Slaboprúdové zariadenia</a></li>
                  <li><a href="opravy-a-udrzba">Opravy a údržba</a></li>
                  <li><a href="kompletne-revizie">Kompletné revízie</a></li>
                </ul>
              </li>
              <li><a href="dotacia">dotácia</a></li>
              <li><a href="galeria">galéria</a></li>                            
              <li><a href="kontakt">kontakt</a></li>
            </ul>
          </div><!-- collapse navbar-collapse -->
        </div><!-- navbar-header -->
      </div><!-- col-md-6 text-left-->

      <div class="col-xs-12 col-md-6 text-right">
        <ul class="top-contact">
          <li><i class="fa fa-mobile"></i> +421 900 123 456</li>
          <li><i class="fa fa-envelope"></i> <a href="mailto:info@dkenergy.sk">info@dkenergy.sk</a></li>
        </ul>				
      </div><!-- col-md-6 text-right -->
    </div><!-- container-fluid -->
  </nav>
</header>

＆＃13;

Answer 1

1。将鼠标悬停在移动设备上并不是非常有用;）

2。你把一些div错了 - 我把它清理干净了：

<header class="header-main">
  <nav id="main-navbar" class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <div class="col-md-6">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/">úvod</a></li>
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">ponuka <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="ponuka-on-grid">On-Grid</a></li>
            <li><a href="ponuka-hybridne-synchronne-zdroje">Hybridné synchrónne zdroje</a></li>
            <li><a href="ponuka-off-grid">Off-Grid</a></li>
          </ul>
        </li>
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">elektromontáže <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="elektromontaze-silnoprudove-zariadenia">Silnoprúdové zariadenia</a></li>
            <li><a href="elektromontaze-slaboprudove-zariadenia">Slaboprúdové zariadenia</a></li>
            <li><a href="opravy-a-udrzba">Opravy a údržba</a></li>
            <li><a href="kompletne-revizie">Kompletné revízie</a></li>
          </ul>
        </li>
        <li><a href="dotacia">dotácia</a></li>
        <li><a href="galeria">galéria</a></li>
        <li><a href="kontakt">kontakt</a></li>
      </ul>
      </div>
      <div class="col-md-6 text-right">
      <ul class="top-contact">
        <li><i class="fa fa-mobile"></i> +421 900 123 456</li>
        <li><i class="fa fa-envelope"></i> <a href="mailto:info@dkenergy.sk">info@dkenergy.sk</a></li>
      </ul>
      </div>
      <!-- collapse navbar-collapse -->
    </div>
    <!-- navbar-header -->
  </div>
  <!-- container-fluid -->
</nav>
</header>

Codepen：http://codepen.io/anthu/pen/xZMGZZ

Answer 2

您提到的html中不需要<div class="col-xs-12 col-md-6">代码，请检查check this

Bootstrap移动导航栏宽度

2 个答案: