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 горизонтальное меню

 PHP.SU

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


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

> Без описания
3d_killer
Отправлено: 23 Января, 2017 - 23:02:08
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)




Пытаюсь сделать горизонтальное меню которое фиксируется на верху, примеров уйма да не то что нужно, так как в этом меню (самой строке) хочу сделать логотип далее меню далее телефон и кусочек места для свернутого меню, вроде более менее получилось, но никак не могу добиться чтобы разворачивающееся меню было на всю ширину, оно подстраивается по заданному размеру col, перерыл инет и не могу найти что либо подобное, вобщем не справлюсь, обращаюсь за помощью.
Код:
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <nav role="navigation" class="navbar navbar-default navbar-fixed-top" id="Header">
  3.         <div class="container">
  4.                 <div class="row">
  5.                         <div class="col-lg-2 col-md-2 col-sm-2 col-xs-4" id="Logo">
  6.                                 <a href="/"><img src="/template/<?=Auth::GetTemplate()?>/img/logo.png"></a>
  7.                         </div>
  8.                         <div class="col-lg-8 col-md-8 col-sm-7 col-xs-1 text-center">
  9.                                 <div id="navbarCollapse" class="collapse navbar-collapse">
  10.                                         <ul class="nav navbar-nav">
  11.                                                 <li><a>Пункт меню</a></li>
  12.                                                 <li><a>Пункт меню</a></li>
  13.                                                 <li><a>Пункт меню</a></li>
  14.                                                 <li><a>Пункт меню</a></li>
  15.                                                 <li><a>Пункт меню</a></li>
  16.                                         </ul>
  17.                                 </div>
  18.                         </div>
  19.                         <div class="col-lg-2 col-md-2 col-sm-3 col-xs-6">
  20.                                 <span class="f-phone">
  21.                                         <span class="glyphicon glyphicon-earphone Blue"></span>
  22.                                         <a class="WhilePhone" href="">Телефон</a>
  23.                                 </span>
  24.                         </div>
  25.                         <div class="hidden-lg hidden-md hidden-sm col-xs-1">
  26.                                 <div class="navbar-header">
  27.                                         <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
  28.                                                 <span class="sr-only">Toggle navigation</span>
  29.                                                 <span class="icon-bar"></span>
  30.                                                 <span class="icon-bar"></span>
  31.                                                 <span class="icon-bar"></span>
  32.                                         </button>
  33.                                 </div>
  34.                         </div>
  35.                 </div>
  36.         </div>
  37. </nav>
  38.  


И ксс где переопределяю поведение:
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. @media (max-width: 767px) { /*xs (extra small)*/
  3.   .text-xs-center {
  4.     text-align: center;
  5.   }
  6.   #navbarCollapse { position:absolute;top:50px;float:left; left:0px;}
  7.  #navbarCollapse ul{ padding-top:18px;}
  8.  #navbarCollapse li{ display:flex !important;}
  9.  #navbarCollapse li a{ font-size:1.2em !important;}
  10.  
  11.  
  12.  
  13. }
  14.  

(Добавление)
блин не могу отредактировать и читаемо вставить код (из DW и notepad++) только так

(Отредактировано автором: 23 Января, 2017 - 23:06:42)

 
My status
 Top
3d_killer
Отправлено: 24 Января, 2017 - 10:48:18
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)




пробую так:
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  3.         <div class="container">
  4.                 <div class="navbar-header">
  5.                 <a class="navbar-brand" href="#">
  6.                         <img alt="Brand" src="/template/<?=Auth::GetTemplate();?>/img/logo.png">
  7.                 </a>   
  8.                  <p class="navbar-text pull-right">Signed</p>
  9.             <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
  10.                                 <span class="sr-only">Toggle navigation</span>
  11.                                 <span class="icon-bar"></span>
  12.                                 <span class="icon-bar"></span>
  13.                                 <span class="icon-bar"></span>
  14.                         </button>
  15.         </div>
  16.         <div id="navbarCollapse" class="collapse navbar-collapse">
  17.         <ul class="nav navbar-nav">
  18.                                 <li><a>Пункт меню</a></li>
  19.                                 <li><a>Пункт меню</a></li>
  20.                                 <li><a>Пункт меню</a></li>
  21.                                 <li><a>Пункт меню</a></li>
  22.                                 <li><a>Пункт меню</a></li>
  23.                         </ul>
  24.         </div>       
  25.         </div>
  26. </nav>
  27.  

Тоже ведет себя не так. добиться хочу того что в рисунке
Прикреплено изображение (Нажмите для увеличения)
Новый точечный рисунок.jpg

(Отредактировано автором: 24 Января, 2017 - 10:49:08)

 
My status
 Top
skruglikov
Отправлено: 24 Января, 2017 - 19:24:47
Post Id



Новичок


Покинул форум
Сообщений всего: 22
Дата рег-ции: Янв. 2017  
Откуда: Киев, Украина


Помог: 1 раз(а)




выложите код где-то на https://jsfiddle[dot]net/
или http://codepen[dot]io/pen/ — тут даже можно подключить bootstap

(Отредактировано автором: 24 Января, 2017 - 19:27:38)

 
 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