0 Пользователей и 1 Гость просматривают эту тему.
  • 5 Ответов
  • 1297 Просмотров
*

str1

  • Новичок
  • 7
  • 0
Bootstrap 3x
« : 21.12.2014, 00: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

  • Профи
  • 6310
  • 336
Re: Bootstrap 3x
« Ответ #1 : 21.12.2014, 10:19:00 »
Изучайте сетку bs3. col-md-* - это для средних экранов свыше 992px, вам надо указывать col-xs- для мобильных устройств.
Подробнее здесь: http://bootstrap-3.ru/css.php#grid-options
*

str1

  • Новичок
  • 7
  • 0
Re: Bootstrap 3x
« Ответ #2 : 21.12.2014, 12: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

  • Новичок
  • 7
  • 0
Re: Bootstrap 3x
« Ответ #3 : 21.12.2014, 13:23:34 »
Проблема частично решилась, если убрать логотип, все идеально, а с логотипом при максимальном сжатии браузера пункт меню "Главная" отскакивает в сторону от логотипа.А нужно чтобы все меню заходило под лого, не могу понять почему так происходит.
*

str1

  • Новичок
  • 7
  • 0
Re: Bootstrap 3x
« Ответ #4 : 21.12.2014, 14:57:07 »
Еще кое-что понял под кнопку попадает все и лого и меню и даже сама кнопка, а должно только меню попадать.Как быть
*

Vitos

  • Осваиваюсь на форуме
  • 161
  • 6
Re: Bootstrap 3x
« Ответ #5 : 30.05.2015, 14:30:20 »
Спойлер
[свернуть]
« Последнее редактирование: 30.05.2015, 15:37:38 от Vitos »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Навигационный бар (Navbar) Bootstrap, Joomla 3.2

Автор wfedin

Ответов: 31
Просмотров: 13428
Последний ответ 06.01.2017, 21:07:31
от slon777
Можно ли и как правильно использовать Bootstrap3 для Joomla3 (Joomla 3.3.1 и Bootstrap 3.1.1)

Автор MansEL

Ответов: 4
Просмотров: 3497
Последний ответ 13.02.2016, 14:21:44
от Marta
Ошибка в консоли при отключении bootstrap

Автор Taatshi

Ответов: 24
Просмотров: 1465
Последний ответ 10.02.2016, 18:19:21
от Филипп Сорокин
Как правильно обновить bootstrap до 3-й версии?

Автор borro

Ответов: 7
Просмотров: 2860
Последний ответ 04.09.2015, 22:23:38
от Mekuya
Про разработку с less препроцессором под bootstrap 3 на Joomla 3

Автор borro

Ответов: 2
Просмотров: 649
Последний ответ 14.05.2015, 09:15:54
от borro