Выпадающее меню bootstrap при уменьшении экрана

@serrggeee · Регистрация: 09.10.2010

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

Привет все. Вот верстаю сайт на bootstrap и столкнулся вот с такой проблемой

HTML5

<nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-left left">
                            <li><a href="#"><img alt="Brand" src="img/logo.png"></a></li>
                            
                        </ul>
                        <ul class="nav navbar-nav navbar-left">
                            <li><p class="big">Company Name</p>
                        <p class="small">company slogn goes hier</p></li>
                            
                        </ul>
                        
                        <ul class="nav navbar-nav navbar-right right">
                           
                            <li><a href="#" class="home background-img"></a><p class="home_p">Home</p></li>
                            <li><a href="#" class="cont_us background-img"></a><p class="cont_us_p">Contact us</p></li>
                        </ul>
                    </div>
                </div>
                   
        </nav>

первый элемент ul с классом left имеет смещение .navbar-left.left {float: left !important;margin-left: 358px;}
но при уменьшении экрана, и нажатии кнопки button выпадает меню и этот элемент так же смещен я прописал такой класс #navbar.in .navbar-left.left {margin-left: 0px;padding-left: 0px;padding-right: 0px;}, так как стили для больших экранов прописанны через @media но вот в чем проблемма, при большом экране я обновляю страницу, этот элемент смещен на заданную велечину, далее я уменьшаю экран, нажимаю на кнопку, выпадает меню и элемент уже не смещен в сторону что я хотел я добился но когда я увеличиваю экран и при этом не закрыл меню этот стиль который при маленьком экране задействован, а который при большом нет, а все работает если только закрыть меню и увеличить экран, помогите разобраться какую связку классов нужно написать что бы работали именно те стили которые я прописал. вот ссылка http://hostserg.irk0.ru/my/my.html

	14.03.2015, 16:34