CSS引导程序填充导航的左侧部分

Question

当前我必须实现一个复杂的导航样式。

我成功地将问题简化为只显示html的一部分
问题是我无法触摸HTML代码。

以下是代码(一个简单的引导程序导航栏(：
https://jsfiddle.net/5y4asdef/

我想用白色填充"应用程序名称"左侧的空白，这样可以在所有分辨率上工作，尤其是(更宽的(

我试过这样的东西：

.navbar-header:after {
content: " ";
background-color: white;
width: 110px;
height: 80px;
display: block;
position: absolute;
left:  0px;
top: 0;
}

我尝试过结合一些背景属性，但不知道如何应用它。

我想确保无论屏幕多长时间都能正常工作：
https://jsfiddle.net/5y4asdef/show(fullscreen)

Answer 1

使用.ccontainer流体类，而不是.cocontainer

以下是更新后的片段：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>

Answer 2

这是我目前的非质量解决方案：

.navbar-header {
position: relative;
}
.navbar-header:after {
content: " ";
background-color: white;
width: 1000px;
height: 80px;
display: block;
position: absolute;
left: -1000px;
top: -6px;
}