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

使用 .container-fluid 类代替 .container

这是更新的代码段：

<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;
}

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

2 个答案: