2015-12-23 2 views
0

Можете ли вы помочь мне сделать это возможным, новичок, я хочу 2 цвета фона в одной навигационной панели. другой цвет фона для логотипа, а также для меню, пожалуйста, проверьте мой скриншот ниже, и я буду копировать и вставлять мои самозагрузки HTML здесь спасибоBootstrap Navbar 2 Цвет фона

NavBar ScreenShot

<nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header page-scroll"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <div class="col-md-12"> 
       <a class="navbar-brand page-scroll" href="#page-top"><img src=""></a> 
       </div> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li class="hidden"> 
         <a href="#page-top"></a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#services">About Us</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#portfolio">Services</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#about">News & Events</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#team">Career</a> 
        </li> 
        <li> 
         <a class="page-scroll" href="#contact">Contact</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container-fluid --> 
    </nav> 
+1

вы хотите http://jsfiddle.net/n2jy53v4/1/ этот тип? –

+0

Возможный дубликат [Изменить цвет навигатора в Twitter Bootstrap 3] (http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3) –

ответ

1

Просто используйте следующий CSS.

.container div.navbar-header 
{ 
     background-color: white; 
} 

.container div#bs-example-navbar-collapse-1 
{ 
     background-color: red; 
} 
0
.container div.navbar-header{background-color: #eeeeee;} 

.container div#bs-example-navbar-collapse-1{background-color: #f82225;} 
+2

Рассмотрите возможность добавления объяснения к этому ответу. Только код Ответы часто бесполезны и не дают достаточного объяснения OP. – Magisch

Смежные вопросы