2015-09-19 106 views
0

我建立這個網站 torgoborudovanie.com引導崩潰的菜單有兩行

我有一個導航欄倒塌與bootstrap.But建立,當我嘗試調整窗口,我得到的是這樣的:enter image description here

正如你可以看到(你可以真正嘗試它)導航欄現在有2條線,它看起來有線(實際的問題是,它看起來像這樣的Iphone和Ipad)然後,你可以調整它多一點,它會崩潰,因爲我想。 enter image description here

您可以通過查看開發人員工具中的html代碼來查看代碼。 所以我不會在這裏發佈,使qustion乾淨small.But如果你想我可以在這裏發佈的代碼太=)

回答

0

你需要改變你的斷點,當導航欄被倒塌......

因此,例如,這應該工作:

@media only screen and (min-width: 1200px) { 
    .collapse { 
     display: block; 
    } 
    .navbar-toggle { 
     display: none; 
    } 
} 

@media only screen and (max-width: 1200px) { 
    .collapse { 
      display: none; 
     } 
     .navbar-toggle { 
     display: block; 
     } 
} 

因爲它漂浮(因爲它這麼長時間)後,1200像素寬度...

**對不起,我犯了一個錯誤......現在就來試試吧: )**

+0

我這樣做,但現在它看起來like..well等待5秒鐘,我將上傳代碼.. – user2950593

+0

[鏈接到測試頁面(http://www.torgoborudovanie.com/ test.html)在這裏,你可以看到我已經失去了標誌,我也得到了一些視網膜顯示錯誤(我可以刪除視網膜庫,所以一個問題少) – user2950593

+0

so .. @FalcoB?=) – user2950593

0

我結束了這個(相當糟糕的是公平的解決方法) 在頁面加載,如果我有window.width小於1200px我只是隱藏長文本。

function hideSlogan() { 
    if($(window).width() <1200) {$('.slogan').hide()} 
}; 
hideSlogan(); 
0

轉到開始在MOBILE NAV評論的CSS規則;這些是您可以調整的規則,以使導航欄在不同的斷點處摺疊。

在一個旁註,有在導航一個額外的,破碎列表標籤,並與Надежныйпартнер的定位 - качественныерешения!導航欄崩潰 DIV裏面你會以下行爲:

如果展開菜單時,它在移動,然後展開視您的navbar將恢復爲的line-height:60像素,除非瀏覽器被刷新。可能無關緊要,但是因爲你試圖改變崩潰斷點,所以值得一提。

**我還將內聯樣式與CSS規則的其餘部分一起移動。

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700, 800); 
 
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400italic); 
 
* { 
 
    margin: 0; 
 
    padding: 0px; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 
body { 
 
    background: #fff; 
 
    margin: 0; 
 
    color: #42413e; 
 
    padding-top: 50px; 
 
} 
 
/* BOOTSTRAP MODIFICATION */ 
 

 
.navbar-right a .btn-orange { 
 
    margin-top: -5px; 
 
} 
 
.btn-orange { 
 
    background: #f27242; 
 
    border-radius: 2px; 
 
    color: white; 
 
    font-size: 12px; 
 
    font-weight: 700; 
 
} 
 
.btn-orange:hover { 
 
    background: #e16a3e; 
 
    color: white; 
 
} 
 
.navbar-default .navbar-brand { 
 
    height: 50px; 
 
    padding: 10px 15px; 
 
    font-size: 20px; 
 
    line-height: 22px; 
 
    font-weight: 700; 
 
} 
 
.navbar.navbar-default { 
 
    background-color: #ffffff; 
 
    border-color: #e7e7e7; 
 
} 
 
.navbar-default .navbar-nav > .active > a, 
 
.navbar-default .navbar-nav > .active > a:hover, 
 
.navbar-default .navbar-nav > .active > a:focus { 
 
    color: #f27242; 
 
    background-color: transparent; 
 
} 
 
.navbar-default .navbar-nav > li > a { 
 
    color: #ccc; 
 
} 
 
.navbar-default .navbar-right { 
 
    padding-top: 5px 
 
} 
 
.navbar-default li.dropdown a { 
 
    color: black; 
 
} 
 
.navbar-default span.head-title { 
 
    line-height: 60px; 
 
} 
 
.navbar-default .navbar-right .dropdown-menu { 
 
    right: auto; 
 
    left: 0; 
 
} 
 
.navbar-right li.contact-info a { 
 
    color: #42413e; 
 
} 
 
/****MOBILE NAVBAR******/ 
 

 
@media (max-width: 1200px) { 
 
    .custom-navbar .navbar-header { 
 
    float: none; 
 
    } 
 
    .custom-navbar .navbar-left, 
 
    .custom-navbar .navbar-right { 
 
    float: none !important; 
 
    } 
 
    .custom-navbar .navbar-toggle { 
 
    display: block; 
 
    } 
 
    .custom-navbar .navbar-collapse { 
 
    border-top: 1px solid transparent; 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
 
    overflow-x: hidden; 
 
    } 
 
    .custom-navbar.navbar-fixed-top { 
 
    top: 0; 
 
    border-width: 0 0 1px; 
 
    } 
 
    .custom-navbar .navbar-collapse.collapse { 
 
    display: none!important; 
 
    } 
 
    .custom-navbar .navbar-nav { 
 
    float: none!important; 
 
    margin-top: 7.5px; 
 
    } 
 
    .custom-navbar .navbar-nav > li { 
 
    float: none; 
 
    } 
 
    .custom-navbar .navbar-nav > li > a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    } 
 
    .custom-navbar .collapse.in { 
 
    display: block !important; 
 
    } 
 
    .custom-navbar .navbar-nav .open .dropdown-menu { 
 
    position: static; 
 
    float: none; 
 
    width: auto; 
 
    margin-top: 0; 
 
    background-color: transparent; 
 
    border: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    } 
 
    .custom-navbar .navbar-brand { 
 
    height: 55px; 
 
    padding: 10px 15px; 
 
    font-size: 20px; 
 
    line-height: 22px; 
 
    font-weight: 700; 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default custom-navbar navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Переключить навигацию</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
     <a class="navbar-brand" href="#"> 
 
     <img src="http://www.torgoborudovanie.com/assets/img/logo1.png" width="140"> 
 
     </a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse"><span class="head-title">Надежный партнер - качественные решения!</span> 
 

 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Каталог <span class="caret"></span></a> 
 

 
      <ul class="dropdown-menu"> 
 
      <li><a href="stellazhi">Стеллажи</a> 
 

 
      </li> 
 
      <li><a href="torg-mebel">Торговая мебель</a> 
 

 
      </li> 
 
      <li><a href="telezhki-korzini">Тележки и корзины</a> 
 

 
      </li> 
 
      <li> <a href="kass-boxes">Кассовые боксы</a> 
 

 
      </li> 
 
      <li><a href="holod-oborudovanie">Холодильное оборудование</a> 
 

 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="delivery">Условия доставки</a> 
 

 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="contact-info"> 
 
      <a href="#"> <i class="fa fa-phone "></i> 8 (343) 3448090</a> 
 

 
     </li> 
 
     <li class="contact-info"> 
 
      <a href="mailto:[email protected]"> <i class="fa fa-envelope"></i> [email protected]</a> 
 

 
     </li> 
 
     <li> 
 
      <a href="#f"> 
 
      <button class="btn btn-sm btn-orange" type="button">Заказать звонок</button> 
 
      </a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

+0

謝謝。我會遠離筆記本電腦)))今天已經太晚了=) – user2950593