Question

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>

提前谢谢。非常感谢您的帮助。

Answer 1

这些通常与容器的保证金相关

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

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

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

Answer 2

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

使用以下CSS解决此问题：

＆＃13;

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

＆＃13;

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

＆＃13;

在这种情况下也有效的方法是将container-fluid替换为row-fluid。这样就可以在没有padding的情况下提供全宽度属性而无需修改。

<div class="row-fluid">

Answer 3

"col 2" is not a valid ID.

...

删除col 2类并替换为col2

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

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

Div不包括整页宽度

3 个答案: