引导3导航栏背景重复

Question

这是我想什么有：

即引导的导航栏，占用了屏幕宽度的100％，并且，在右侧有该特定设计：黑色/红色。

截至目前，这是我在结构方面：

我想我需要使用此图片： 以及重复这样一句：

但我无法做到这一点，因为我找不到合适的结构或逻辑。 我该怎么做？ 任何指针，不胜感激。

下面是一些示例代码： http://www.bootply.com/O0EdufR1Jx

Answer 1

您可以使用绝对定位的容器有：前容器风格像一个三角形。这不是最干净的，但是一个很好的起点。代码当然可以清理。

http://www.bootply.com/soi5inhR2O

给这一个镜头：

CSS

.container-bg { 
    background-color:#ccc; 
} 

.navbar .container { 
    float: left; 
     width: 100%; 
     background-color: #222; 
     padding: 0; 
     position: relative; 
} 
.container>.navbar-header { 
    width: 1170px; 
    margin: 0 auto; 
    float: none; 
} 
.navbar>.container .navbar-brand { 
    margin: 0; 
    padding: 0; 
} 
#navbar { 
    float: left; 
    width: 100%; 
    background-color: #fff;  
} 
span.red-section { 
    position: absolute; 
    right: 0; 
    top: 0; 
    height: 50px; 
    background-color: red; 
    width: 25%; 
} 
span.red-section:before { 
    content: ''; 
    border-right: 50px solid red; 
    border-top: 50px solid transparent; 
    position: absolute; 
    left: -50px; 
    top: 0; 
} 

HTML：

<nav class="navbar navbar-default"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     <img alt="" src="https://dl.dropboxusercontent.com/u/16451566/*/20150403/logo.jpg"> 
     </a> 
     <span class="red-section"></span> 
    </div> 
    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">item 1</a></li> 
     <li><a href="#">item 2</a></li> 
     <li><a href="#">item 3</a></li> 
     <li><a href="#">item 4</a></li> 
     <li><a href="#">item 5</a></li> 

     </ul> 
    </div> 
    </div> 
</nav> 

<div class="container container-bg"> 

    <div class="row"> 
    <div class="col-xs-12"> 
     <p>some content here...</p> 
     <p>some content here...</p> 
     <p>some content here...</p> 
     <p>some content here...</p> 
    </div> 
    </div> 

</div>