Question

我正在创建一个导航栏并在其下面放置一个横幅，但它们不是100％宽。我希望他们两个都包裹100％的宽度。

HTML（header.php文件）

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="col-md-12" style="margin-bottom: 0px;">
                <nav class="navbar navigation_bar navbar-default navbar-static-top" role="navigation">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                 <span class="sr-only">Toggle navigation</span>
                                 <span class="icon-bar"></span>
                                 <span class="icon-bar"></span>
                                 <span class="icon-bar"></span>
                            </button>

                        </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <div class="col-md-3"></div>
                <div class="col-md-6"> 
                     <center>
                     <ul class="nav navbar-nav">
                            <li class="active"><a href="#">HOME</a></li>
                            <li><a href="#">MENUITEM1</a></li>
                            <li><a href="#">MENUITEM2</a></li>
                            <li><a href="#">MENUITEM3</a></li>
                            <li><a href="#">MENUITEM4</a></li>
                            <li><a href="#">MENUITEM5</a></li>
                            <li><a href="#">MENUITEM6</a></li>
                            <li><a href="#">MENUITEM7</a></li>
                      </ul>
                      </center>
                  </div>
                  <div class="col-md-3"></div>
                 </div><!-- /.navbar-collapse !-->
              </div><!-- /.container-fluid !-->
             </nav>
    </div>

的index.php

<?php include "header.php" ?>

    <div class="col-md-12">
            <img class="img-responsive" src="img/banner_1.png" width="100%">
    </div>

注意：我可能添加了一些额外的类，但它们仅用于更改颜色，布局根本没有触及。

另外，我尝试在col-md-12上面添加行类，但它会导致从左到右滚动页面，反之亦然。

我想知道如何使导航栏和横幅100％宽。在检查col-md-12后，它的宽度为100％，但我不确定它为什么不起作用。

提前致谢。

JSFiddle

Answer 1

col-md-12具有默认的填充值.... padding-left: 15px和padding-right: 15px。

如果要删除bootstrap的这些默认值，请将另一个类添加到padding: 0的同一div中。

这是一个JSFiddle：http://jsfiddle.net/v42e2/

Answer 2

从Bootstrap 3.1开始，您可以使用班级container-fluid让整个屏幕上的内容延伸

<div class="container-fluid">
   <div class="row">
     //your code for nav here
   </div>
 </div>

Bootstrap col-md-12没有包裹整个屏幕宽度

2 个答案: