bootstrap 3 导航栏背景重复

Question

这是我想要的：

即，一个占屏幕宽度 100% 的引导导航栏，并且在右侧具有特定的设计：黑色/红色。

到目前为止，这就是我的结构：

我想我需要使用这张图片： 以及重复这个：

但我无法做到，因为我找不到合适的结构或逻辑。 我该怎么做？ 任何指针都非常感谢。

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

Answer 1

您可以使用绝对定位的容器和三角形样式的 :before 容器。这不是最干净的，但它是一个很好的起点。代码当然可以清理。

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>