Форум русской поддержки Joomla!® CMS
05.12.2016, 04:33:14 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Bootstrap 3x

 (Прочитано 1078 раз)
0 Пользователей и 1 Гость смотрят эту тему.
str1
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 7


« : 21.12.2014, 01:24:00 »

Делаю шаблон и возникла проблема, когда браузер уменьшается, появляется кнопка, но меню в ней себя ведет странно, вроде бы сделал его по центру, но при разных разрешениях оно то по центру, то слева, то вообще элемент меню "главная" отделяется от основного.И вообще я запутался с этим обновлением Bootstrap-3.Во 2 span* был, а тут какие-то col-md-* xs, вот код, проблема точно в нем, подскажите что тут исправить?

Код:
<div class="container-fluid">
        <div class="row">
             <div class="col-md-12 TopHeader">
                <div class="visible-md visible-lg">
                    <div class="row">
                        <div class="col-md-4 logo">
                            <?php if ($tmpl_logo) : ?>
                                <a href="/" ><img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($tmpl_logo);?>" alt="MYLOGO"/></a>
                            <?php endif;?>
                        </div>
                        <div class="col-md-8 padding-right">
                            <div class="nav navbar-nav Topmenu">
                                <jdoc:include type="modules" name="Topmenu" style="none" />
                            </div>
                        </div>
                    </div>

             </div>
             <div class="hidden-md hidden-lg">
                <div class="row">
                        <div class="col-md-4 logo">
                            <?php if ($tmpl_logo) : ?>
                                <a href="/" ><img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($tmpl_logo);?>" alt="MYLOGO"/></a>
                            <?php endif;?>
                        </div>
                        <div class="col-md-8">
                           <a class="pull-right Mobilepadding" data-toggle="collapse" data-target=".nav-collapse"> <button class="button bt"></button></a>
                        </div>
                        <div class="nav-collapse collapse">
                          <div class="nav navbar-nav Mobilestyle">
                          <div class="center">
                            <jdoc:include type="modules" name="Topmenu" style="none" />
                           
                            </div>
                        </div>
                        </div>
                    </div>
                   
                 </div>
            </div>
        </div>
Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Offline Offline

Пол: Мужской
Сообщений: 6453



« Ответ #1 : 21.12.2014, 11:19:00 »

Изучайте сетку bs3. col-md-* - это для средних экранов свыше 992px, вам надо указывать col-xs- для мобильных устройств.
Подробнее здесь: http://bootstrap-3.ru/css.php#grid-options
Записан
str1
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 7


« Ответ #2 : 21.12.2014, 13:28:09 »

Ну хорошо в контейнере hidden-md hidden-lg я заменил md на xs и на sm пробовал менять, фаербагом смотрю блок col-xs-8 стал отображаться при маленьком разрешении, но все-равно меню в таком разрешении отображается некорректно

Код:
             <div class="hidden-md hidden-lg">
                <div class="row">
                        <div class="col-xs-4 logo">
                            <?php if ($tmpl_logo) : ?>
                                <a href="/" ><img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($tmpl_logo);?>" alt="MYLOGO"/></a>
                            <?php endif;?>
                        </div>
                        <div class="col-xs-8">
                           <a class="pull-right Mobilepadding" data-toggle="collapse" data-target=".nav-collapse"> <button class="button bt"></button></a>
                        </div>
                        <div class="nav-collapse collapse">
                          <div class="nav navbar-nav Mobilestyle">
                          <div class="center">
                            <jdoc:include type="modules" name="Topmenu" style="none" />
                           
                            </div>
                        </div>
                        </div>
                    </div>
                   
                 </div>
Записан
str1
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 7


« Ответ #3 : 21.12.2014, 14:23:34 »

Проблема частично решилась, если убрать логотип, все идеально, а с логотипом при максимальном сжатии браузера пункт меню "Главная" отскакивает в сторону от логотипа.А нужно чтобы все меню заходило под лого, не могу понять почему так происходит.
Записан
str1
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 7


« Ответ #4 : 21.12.2014, 15:57:07 »

Еще кое-что понял под кнопку попадает все и лого и меню и даже сама кнопка, а должно только меню попадать.Как быть
Записан
Vitos
Осваиваюсь на форуме
***

Репутация: +6/-0
Offline Offline

Пол: Мужской
Сообщений: 165



« Ответ #5 : 30.05.2015, 15:30:20 »

Показать текстовый блок
« Последнее редактирование: 30.05.2015, 16:37:38 от Vitos » Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet