page-header 100％宽度不起作用

Question

CSS

.page-header{
    background: #393e4f;
    width: 100%;
    height:50px;
    margin: 0 auto;
}

HTML

 <div class="container">
    <div class="page-header"><span>XYZ</span></div>
    </div>

我希望page-header的页面宽度为100％。

我得到了这个我不想要的结果。

谢谢。

Answer 1

bootstrap container类增加了一个余量。如果你想使用标题全宽，请把它放出容器。

check here

容器宽度在bootstrap css的这一节中给出。

Answer 2

启动时的Body元素具有默认边距。这就是为什么你有这个白色空间。 在大多数主流浏览器中，默认边距为8px。它由您的浏览器提供的user-agent-stylesheet以像素为单位定义。只需将此代码插入您的代码中即可。

  body
    {
    width:100%;
    margin:0;
    }

Answer 3

通过将最外面的.container更改为.container-fluid，将任何固定宽度的网格布局转换为全宽布局。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>