Bootstrap полная ширина Navbar два разных цвета фона на стороне

Question

Я использую стандартную полномасштабную жидкостную бутстрапную навигацию из примеров, расположенных внутри контейнера. То, что я пытаюсь достичь, я бы хотел иметь белый фон с левой стороны под логотипом, а также с логотипа вправо с синим цветом фона. Является ли это возможным? hope this image will explain Спасибо.

Answer 1

Это один из способов сделать это его сложно, но это работает

HTML:

<div class="navbar navbar-default"> 
    <div class="container"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#">Brand</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="divider-vertical"></li> 
     <li><a href="#">More</a></li> 
    <li><a href="#">Options</a></li> 
    </ul> 
    </div> 
</div> 

CSS:

.navbar-header{ 
    background:#e7e7e7;; 
    position:relative; 
} 

.navbar-header:before { 
    position: absolute; 
    height: 100%; 
    display: inline-block; 
    background: #e7e7e7;; 
    top: 0; 
    left: -9999px; 
    right: 100%; 
} 
.navbar-default{ 
    background:blue; 
} 

See demo1

и если вы хотите, чтобы искажать краю

See demo2

Answer 2

может быть, вы могли бы использовать в качестве фона цвета в «острый» градиент только два цвета (используйте http://www.colorzilla.com/gradient-editor/) скопировать здесь стандартный пример NavBar из начальной загрузки документации:

.navbar{ 
 
background: rgb(255,255,255); /* Old browsers */ 
 
background: -moz-linear-gradient(left, rgb(255,255,255) 0%, rgb(255,255,255) 20%, rgb(125,185,232) 20%); /* FF3.6-15 */ 
 
background: -webkit-linear-gradient(left, rgb(255,255,255) 0%,rgb(255,255,255) 20%,rgb(125,185,232) 20%); /* Chrome10-25,Safari5.1-6 */ 
 
background: linear-gradient(to right, rgb(255,255,255) 0%,rgb(255,255,255) 20%,rgb(125,185,232) 20%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#7db9e8',GradientType=1); /* IE6-9 */ 
 

 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </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"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <form class="navbar-form navbar-left"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" placeholder="Search"> 
 
     </div> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
     </form> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav>

Answer 3

Вы можете попробовать линейный градиент следующим образом:

style="background: linear-gradient(-90deg, red, yellow);"

С дополнительным кодом мы можем вам помочь.