Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Bootstrap 3

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
etoYA
Отправлено: 02 Апреля, 2014 - 06:57:39
Post Id



Участник


Покинул форум
Сообщений всего: 1859
Дата рег-ции: Июль 2011  
Откуда: Крым


Помог: 21 раз(а)
Всем привет.

Как увеличить порог collapse в navbar. Т.е. чтоб кнопка .navbar-toggle появлялась с разрешением экрана до 1200px, а не как сейчас до 767px.

p.s пробовал в LESS переменных менять значение

@grid-float-breakpoint- не помогло

Гуглил, и нашел такое

CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. @media (max-width: 979px) {
  3.     .btn-navbar {
  4.         display: none;
  5.     }
  6.     .navbar .nav-collapse {
  7.         clear: none;
  8.     }
  9.  
  10.     .nav-collapse {
  11.         height: auto;
  12.         overflow: auto;
  13.     }
  14.  
  15.     .navbar .nav {
  16.         float: left;
  17.         margin: 0 10px 0 0;
  18.     }
  19.  
  20.     .navbar .brand {
  21.         margin-left: -20px;
  22.         padding: 8px 20px 12px;
  23.     }
  24.  
  25.     .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
  26.         display: block;
  27.     }
  28.  
  29.     .navbar .nav > li > a, .navbar .dropdown-menu a {
  30.         border-radius: 0;
  31.         color: #999999;
  32.        font-weight: normal;
  33.         padding: 10px 10px 11px;
  34.     }
  35.  
  36.     .navbar .nav > li {
  37.         float: left;
  38.     }
  39.  
  40.     .navbar .dropdown-menu {
  41.         background-clip: padding-box;
  42.         background-color: #FFFFFF;
  43.        border-color: rgba(0, 0, 0, 0.2);
  44.         border-radius: 0 0 5px 5px;
  45.         border-style: solid;
  46.         border-width: 1px;
  47.         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  48.         display: none;
  49.         float: left;
  50.         left: 0;
  51.         list-style: none outside none;
  52.         margin: 0;
  53.         min-width: 160px;
  54.         padding: 4px 0;
  55.         position: absolute;
  56.         top: 100%;
  57.         z-index: 1000;
  58.     }
  59.  
  60.     .navbar-form, .navbar-search {
  61.         border:none;
  62.         box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
  63.         float: left;
  64.         margin-bottom: 0;
  65.         margin-top:6px;
  66.         padding: 9px 15px;
  67.     }
  68.  
  69.     .navbar .nav.pull-right {
  70.         float: right;
  71.         margin-left: auto;
  72.     }
  73. }
  74.  
  75.  


и это не помогло.

Можете подскзать.

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4.         <head>
  5.                 <link href="css/bootstrap.min.css" rel="stylesheet" />
  6.                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.                 <link href="css/style.css" rel="stylesheet" />
  8.                 <script src="http://code.jquery.com/jquery-latest.js"></script>
  9.                 <script src="js/bootstrap.min.js"></script>
  10.                 <meta charset="utf-8" />
  11.                 <title>Lorem ipsum dolor sit amet</title>
  12.         </head>
  13.         <body>
  14.                 <!-- header -->
  15.                 <header id="header">
  16.                         <div class="container">
  17.                                 <div class="row">
  18.  
  19.                                 </div>
  20.                         </div>
  21.                 </header>
  22.                 <!-- main navigation -->
  23.                 <nav class="navbar navbar-default" role="navigation">
  24.                         <div class="container">
  25.                                 <!-- search form -->
  26.                                 <form action="" name="search" method="get" class="form-inline form-search pull-right">
  27.                                         <div class="input-group">
  28.                                                 <input type="text" class="form-control" id="search-field" name="search" placeholder="Поиск">
  29.                                                 <button type="submit" class="btn btn-primary">
  30.                                                         <span class="glyphicon glyphicon-search"></span>
  31.                                                 </button>
  32.                                         </div>
  33.                                 </form>
  34.                                 <!-- navigation -->
  35.                                 <span class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  36.                                         <span class="sr-only">Navigation</span>
  37.                                         <span class="icon-bar"></span>
  38.                                         <span class="icon-bar"></span>
  39.                                         <span class="icon-bar"></span>
  40.                                 </span>
  41.                                 <div class="collapse navbar-collapse navbar-left">
  42.                                         <ul class="nav navbar-nav">
  43.                                                 <li><a href="#">Главная</a></li>
  44.                                                 <li><a href="#">Свой бизнес</a></li>
  45.                                                 <li><a href="#">Инвестиции</a></li>
  46.                                                 <li><a href="#">Недвижимость</a></li>
  47.                                                 <li><a href="#">Финансы</a></li>
  48.                                                 <li><a href="#">Реклама</a></li>
  49.                                                 <li><a href="#">Карьера</a></li>
  50.                                         </ul>
  51.                                 </div>
  52.                         </div>
  53.                 </nav>
  54.         </body>
  55. </html>
  56.  

CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. @body-bg: #fff;
  3. /* navigation */
  4. @navbar-default-bg: #fff;
  5. @navbar-default-toggle-border-color: #c7c7c7;
  6. @border-radius-base: 0;
  7. /* search form */
  8. @input-border: #c7c7c7;
  9. @input-color-placeholder: #c7c7c7;
  10. @input-border-radius: 0;
  11. @btn-primary-bg: #2da5da;
  12. @grid-float-breakpoint: 800px;
  13. @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
  14.  

CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. @import "bootstrap/bootstrap.less";
  3. @import "variables.less";
  4.  
  5. .container{
  6.         max-width: 1140px;
  7. }
  8. #header{
  9.         height: 130px;
  10. }
  11. .navbar-default{
  12.         border: 0;
  13.         border-top: 1px solid #c7c7c7;
  14. }
  15. .navbar-default .navbar-toggle{
  16.         float: left;
  17. }
  18. .navbar-default .form-search{
  19.         padding: 8px 0;
  20.         width: 325px;
  21. }
  22. .navbar-default .form-search .input-group .form-control{
  23.         width: 285px;
  24. }
  25. .navbar-default .form-search .btn-primary{
  26.         width: 40px;
  27.         border: 1px solid #2da5da;
  28. }
  29. @media (max-width: 1200px) {
  30.         .navbar-toggle{
  31.                 display: block;
  32.         }
  33.         .collapse{
  34.                 display: none;
  35.         }
  36. }
  37.  
  38.  
  39.  
 
 Top
DelphinPRO
Отправлено: 02 Апреля, 2014 - 21:00:44
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
в файле variables.less нужно поменять
CODE (less):
скопировать код в буфер обмена
  1. @grid-float-breakpoint:     @screen-sm-min;
  2. // на
  3. @grid-float-breakpoint:     @screen-lg-min;
  4. // или
  5. @grid-float-breakpoint:     1200px;

и перекомпилировать стили.
Это должно помочь. По крайней мере у меня работает.


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB