我建立這個網站 torgoborudovanie.com引導崩潰的菜單有兩行
我有一個導航欄倒塌與bootstrap.But建立,當我嘗試調整窗口,我得到的是這樣的:
正如你可以看到(你可以真正嘗試它)導航欄現在有2條線,它看起來有線(實際的問題是,它看起來像這樣的Iphone和Ipad)然後,你可以調整它多一點,它會崩潰,因爲我想。
您可以通過查看開發人員工具中的html代碼來查看代碼。 所以我不會在這裏發佈,使qustion乾淨small.But如果你想我可以在這裏發佈的代碼太=)
我建立這個網站 torgoborudovanie.com引導崩潰的菜單有兩行
我有一個導航欄倒塌與bootstrap.But建立,當我嘗試調整窗口,我得到的是這樣的:
正如你可以看到(你可以真正嘗試它)導航欄現在有2條線,它看起來有線(實際的問題是,它看起來像這樣的Iphone和Ipad)然後,你可以調整它多一點,它會崩潰,因爲我想。
您可以通過查看開發人員工具中的html代碼來查看代碼。 所以我不會在這裏發佈,使qustion乾淨small.But如果你想我可以在這裏發佈的代碼太=)
你需要改變你的斷點,當導航欄被倒塌......
因此,例如,這應該工作:
@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像素寬度...
**對不起,我犯了一個錯誤......現在就來試試吧: )**
我結束了這個(相當糟糕的是公平的解決方法) 在頁面加載,如果我有window.width小於1200px我只是隱藏長文本。
function hideSlogan() {
if($(window).width() <1200) {$('.slogan').hide()}
};
hideSlogan();
轉到開始在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>
謝謝。我會遠離筆記本電腦)))今天已經太晚了=) – user2950593
我這樣做,但現在它看起來like..well等待5秒鐘,我將上傳代碼.. – user2950593
[鏈接到測試頁面(http://www.torgoborudovanie.com/ test.html)在這裏,你可以看到我已經失去了標誌,我也得到了一些視網膜顯示錯誤(我可以刪除視網膜庫,所以一個問題少) – user2950593
so .. @FalcoB?=) – user2950593