引導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/stackoverflow/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>