Div 不覆盖整个页面宽度答案

【问题标题】：Div don't cover whole width of pageDiv 不覆盖整个页面宽度
【发布时间】：2016-08-28 02:40:51
【问题描述】：

Div Above navigation don't cover whole width of page. And how to determine height?

<nav class="navbar navbar-default  navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class='col-md-12-fluid' style="
        padding-bottom: 2px;
        background-color:#FF5722;
        padding-top: 2px;
        ">
  <div class='col-md-8-fluid'> 
    <!--recently search was here--> 
    <a class="navbar-brand" href="index.html"><img src="images/1.jpg" height="60px" ></a> </div>
  <br>
  <div class='col-md-4-fluid'>
    <h3>Nepal Safety</h3>
  </div>
</div>
<div class='clearfix'> </div>
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>

在此先感谢您。我们将不胜感激。

【问题讨论】：

你能创建一个小提琴或给我们一个测试页吗？
你能提供一个工作的sn-p吗？这不是有效的 HTML。如果您执行 sn-p 是最好的，因为我们实际上可以看到正在发生的事情，而不仅仅是代码。
Bootstrap 3 .container-fluid with grid adding unwanted padding的可能重复

标签： html css twitter-bootstrap

【解决方案1】：

您使用的 container-fluid 两边都有填充。

使用以下 CSS 解决此问题：

body .container-fluid {
    padding-left:0;
    padding-right:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default  navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class='col-md-12-fluid' style="
    padding-bottom: 2px;
    background-color:#FF5722;
    padding-top: 2px;
    ">
    <div class='col-md-8-fluid'>
                <!--recently search was here-->
                <a class="navbar-brand" href="index.html"></a>
        </div><br>
        <div class='col-md-4-fluid'>
        <h3>Nepal Safety</h3>

        </div></div>

        <div class='clearfix'> </div>
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    </nav>

在这种情况下也可以使用container-fluid 替换为row-fluid。这给出了没有padding 且没有修改的全宽属性。

<div class="row-fluid">

【讨论】：

【解决方案2】：

<nav class="navbar navbar-default  navbar-fixed-top">
  <div class="container-fluid">
 </div>

....

删除container-fluid 类并替换为container-fullwidth

或者您可以使用等于 0 的两边填充

.container-fluid {
    padding-left:0;
    padding-right:0;
}

【讨论】：

删除container-fluid 的影响不仅仅是填充

【解决方案3】：

这些通常与容器的边距有关

.container-fluid {
 margin-left: auto;
 margin-right: auto;
 padding-left: 15px;
 padding-right: 15px;
}

你应该重新定义这个类：本地或适当的 css 文件

.container-fluid {
 padding-left: 0px;
 padding-right:0px;
}

【讨论】：

不幸的是，更改 TWBS CSS 文件仅在您更新之前有效。我建议使用您自己的 CSS 来更改填充。