При уменьшении экрана меню закрывает следующий блок. Как исправить?

@kostrorod · Регистрация: 14.04.2012

Author24 — интернет-сервис помощи студентам

Есть шапка меню на bootstrap. При уменьшении экрана меню расширяется и скрывает следующий за ней блок. Оба блока в bootstrape. Как сделать, чтобы меню отодвигало блок ниже, а не скрывало его?

@Kven-M · 20.09.2017, 20:37

Попробуйте это блок, который скрывается обернуть еще одним блоком с классом row

@kostrorod · 20.09.2017, 21:09 **[ТС]**

не помогает.
шапка такая:

HTML5

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
...

скрываемый блок такой

HTML5

<div class="row" id ="show-block">
    <div class="container">
        <div class="row centered">
            <div class="col-lg-12 col-md-12 col-sm-12">
...

@Kven-M · 20.09.2017, 21:28

Из приведенной Вами части кода трудно что-либо воспроизвести, чтобы постараться помочь, выложите именно весь код меню и блока который скрывается.

@kostrorod · 20.09.2017, 21:43 **[ТС]**

HTML5

<html>
 
<head>
    <link rel="stylesheet" href=/electronsun/webjars/datatables/1.10.12/css/jquery.dataTables.min.css>
 
</head>
<body>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="_csrf" content="383814dc-f873-4244-b894-42257b6bfd9b"/>
    <meta name="_csrf_header" content="X-CSRF-TOKEN"/>
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Электронное солнце</title>
    <link rel="stylesheet" href="/electronsun/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href=/electronsun/resources/css/font-awesome.min.css>
    <link rel="stylesheet" href=/electronsun/resources/css/main.css>
 
</head>
 
 
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/electronsun/index" class="navbar-brand">ЭЛЕКТРОННОЕ С<i class="fa fa-sun-o"                               aria-hidden="true"></i>ЛНЦЕ</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="/electronsun/index">Главная</a></li>
                <li><a href="/electronsun/project">О проекте</a></li>
                <li><a href="/electronsun/player">Проигрыватель</a></li>
                <li><a href="/electronsun/lightshow/show">Создать световое шоу</a></li>
                <li><a href="/electronsun/devices">Светильники</a></li>
                
                
                     <li>
                         <a id="user-name" href="/electronsun/users/profile">Юзер</a>
                     </li>
                     <li>
                         <form id="command" action="/electronsun/logout" method="post">
                             <button type="submit" class="btn btn-blue btn-xs btn-xs-2"> Выйти</button></li>
                         <div>
<input type="hidden" name="_csrf" value="383814dc-f873-4244-b894-42257b6bfd9b" />
</div></form>
                
 
            </ul>
        </div>
    </div>
</div>
 
 
 
 
 
<div class="row" id ="show-block">
    <div class="container">
        <div class="row centered">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="#show-open" role="tab" data-toggle="tab">Открыть световое шоу</a></li>
                    <li><a href="#show-device" role="tab" data-toggle="tab">Приборы светового шоу</a></li>
                    <li><a href="#show-edit" role="tab" data-toggle="tab">Редактировать световое шоу</a></li>
                    <li><a href="#show-settings" role="tab" data-toggle="tab">Настройки светового шоу</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="show-open">
                        <h2 class="centered">Открыть световое шоу</h2>
                        <table class="display"  cellspacing="0"  id="datatablelightshow">
                            <thead>
                            <tr>
                                <th>Название</th>
                                <th>Светильники</th>
                                <th>Это шоу ремикс</th>
                                <th>Задействовано в ремиксах</th>
                                <th>Название музыки</th>
                                <th>Опубликовать</th>
                                <th>Удалить</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr>
                                <th>Название</th>
                                <th>Светильники</th>
                                <th>Это шоу ремикс</th>
                                <th>Задействовано в ремиксах</th>
                                <th>Название музыки</th>
                                <th>Опубликовать</th>
                                <th>Удалить</th>
                            </tr>
                            </tfoot>
                        </table>
                        <br/>
 
 
                    </div>
 
                    <div role="tabpanel" class="tab-pane" id="show-device">
 
                    </div>
 
                    <div role="tabpanel" class="tab-pane" id="show-edit">
 
                    </div>
 
                    <div role="tabpanel" class="tab-pane" id="show-settings">
 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
 
 
 
<div id="footer" class="block">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
            <div class="col-md-4">
                <div class="text-right bl-2">
                    <a href="feedback"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/electronsun/webjars/jquery/3.1.1-1/jquery.min.js"></script>
<script type="text/javascript" src="/electronsun/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/electronsun/webjars/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/electronsun/webjars/noty/2.3.8/js/noty/packaged/jquery.noty.packaged.min.js"></script>
<script type="text/javascript" src=/electronsun/resources/js/lightshow/openLightShowModal.js></script>
</html>

@SergioSup · 21.09.2017, 11:14

у вас верхнее меню с position:fixed, следующие за ним блоки должны иметь верхний паддинг размером с высоту nav (в доках бутстрапа написано это)

@kostrorod · 21.09.2017, 18:16 **[ТС]**

а как присвоить высоту nav следующему блоку, если она постоянно меняется?

@SergioSup · 22.09.2017, 19:53

медиа запросами или javascript
или сверстать так, чтобы высота не менялась постоянно

@kostrorod 39 / 28 / 8 Регистрация: 14.04.2012 Сообщений: 249
		1
	При уменьшении экрана меню закрывает следующий блок. Как исправить? 20.09.2017, 20:16. Показов 5356. Ответов 7 Метки bootstrap, css, html (Все метки) Есть шапка меню на bootstrap. При уменьшении экрана меню расширяется и скрывает следующий за ней блок. Оба блока в bootstrape. Как сделать, чтобы меню отодвигало блок ниже, а не скрывало его? Миниатюры 0

@Kven-M 32 / 32 / 24 Регистрация: 16.04.2015 Сообщений: 219
	20.09.2017, 20:37	2
	Попробуйте это блок, который скрывается обернуть еще одним блоком с классом row 0

@Kven-M 32 / 32 / 24 Регистрация: 16.04.2015 Сообщений: 219
	20.09.2017, 21:28	4
	Из приведенной Вами части кода трудно что-либо воспроизвести, чтобы постараться помочь, выложите именно весь код меню и блока который скрывается. 0

@SergioSup 84 / 81 / 42 Регистрация: 20.01.2017 Сообщений: 219
	21.09.2017, 11:14	6
	у вас верхнее меню с `position:fixed`, следующие за ним блоки должны иметь верхний паддинг размером с высоту nav (в доках бутстрапа написано это) 1

@kostrorod 39 / 28 / 8 Регистрация: 14.04.2012 Сообщений: 249
	21.09.2017, 18:16 [ТС]	7
	а как присвоить высоту nav следующему блоку, если она постоянно меняется? 0

@SergioSup 84 / 81 / 42 Регистрация: 20.01.2017 Сообщений: 219
	22.09.2017, 19:53	8
	медиа запросами или javascript или сверстать так, чтобы высота не менялась постоянно 1