bootstrap3如何实现区块占满宽度且自适应?

boostrap新手,最近正在学习中,现在遇到一个问题,在写网页footer的时候希望区块能够占满整个宽度,但是常用的container以及container-fluid都做不到从左到右占满整个宽度,自己尝试写style也没有做到,不知道有没有高手指点下?(下图有参考)

现在的代码如下,其中把container改成container-fluid后似乎也没有改变:

<div class="container color1" >
     <div class="row">
         <div class="col-sm-3">
             <h5 class="center">联系我们</h5>
             <p>地址:北京市海淀区新中关大厦B南-5A层</p>
             <p>电话:400-8787-390</p>
             <p>邮箱:ruitu@oneplusone.cn</p>
             <p>官微:ruitu01(微信号)</p>
         </div>
         <div class="col-sm-3">
             <h5>媒体报道</h5>
         </div>
         <div class="col-sm-3">
             <h5>睿途服务</h5>
         </div>
         <div class="col-sm-3">
             <h5>睿途招聘</h5>
         </div>
     </div>
</div>

评论有问我是不是父元素固定了宽度,现在我的整体代码如下,父元素如果说有的话就是html自己了吧

<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Bootstrap3练习</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
      <nav class="navbar navbar-default navbar-fixed-top">
           <div class="container">
                <a href="#" class="navbar-brand"><strong>睿途教育</strong></a>
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">托管班</a></li>
                        <li><a href="">名校计划</a></li>
                        <li><a href="">留美书房</a></li>
                        <li><a href="">家长课堂</a></li>
                        <li><a href="">关于我们</a></li>
                    </ul>

                <form action="" class="navbar-form navbar-left">
                    <input type="text" placeholder="搜索" class="form-control">
                        <button type="submit">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                </form>
                
               
                     <a href="#" class="btn btn-primary btn-sm navbar-btn navbar-right">订阅课程</a>
                   <div class="profile navbar-right">
                         <ul class="nav navbar-nav">
                            <li><a href="#">登陆</a></li>
                            <li><a href="#">注册</a></li>
                        </ul>
                    </div>
                
            </div>
        </nav>
   
    <div class="container">
        <div class="carousel" data-ride="carousel">
            <div class="carousel-inner">
                <div class="item active" >
                    <img src="/new/img/1.jpg" alt="" width="1200px">
                </div>

            </div>
        </div>
    </div>
    
    <div class="container">
        <h2 class="page-header">关于睿途</h2>
        <div class="row" style="text-align:center;font-size:20px"  >
            <p>睿途是一个专注于北美留学长线规划的培训机构</p>
            <p>致力于提高学生们的北美学术生活适应力</p>
            <p>我们提供极优的一对一教学体验,但不止于此。</p>
        
            <p>基于对标准化考试的稔熟</p>
            <p>以及对学生认知与行为的密切关注</p>
            <p>我们有能力向客户提供1至12个月的托福、SAT解决方案</p>
        </div>
    </div>
    <div class="container">
         <h2 class="page-header">教师团队</h2>
                    
                        <div class="col-sm-3">
                            <img src="img/teachers/%E8%83%A1%E4%B8%AD%E5%8D%8E3.jpg" alt="" class="img-responsive img-circle center-block">
                            <h5 style="text-align:center">胡中华</h5>
                            <p class="comment" >睿途出国创始人,北交大硕士, 原北京新东方北美VIP项目经理,带领教学团队600余人。</p>
                        </div>
                        <div class="col-sm-3">
                            <img src="img/teachers/%E8%83%A1%E4%B8%AD%E5%8D%8E3.jpg" alt="" class="img-responsive img-circle center-block">
                            <h5 style="text-align:center">胡中华</h5>
                            <p class="comment" >睿途出国创始人,北交大硕士, 原北京新东方北美VIP项目经理,带领教学团队600余人。</p>
                        </div>
                        <div class="col-sm-3">
                            <img src="img/teachers/%E8%83%A1%E4%B8%AD%E5%8D%8E3.jpg" alt="" class="img-responsive img-circle center-block">
                            <h5 style="text-align:center">胡中华</h5>
                            <p class="comment" >睿途出国创始人,北交大硕士, 原北京新东方北美VIP项目经理,带领教学团队600余人。</p>
                        </div>
                        <div class="col-sm-3">
                            <img src="img/teachers/%E8%83%A1%E4%B8%AD%E5%8D%8E3.jpg" alt="" class="img-responsive img-circle center-block">
                            <h5 style="text-align:center">胡中华</h5>
                            <p class="comment" >睿途出国创始人,北交大硕士, 原北京新东方北美VIP项目经理,带领教学团队600余人。</p>
                        </div>
    </div>
    <div class="container">
        <h2 class="page-header">
            睿途活动
        </h2>
        <ul>
            <li>西餐会</li>
            <li>音乐会</li>
            <li>发布会</li>
            <li>徒步</li>
            <li>读书会</li>
        </ul>
        <div>
            <h4 class="center">睿途提供的是生态系统,而不仅仅是课程。</h4>
        </div>
    </div>
    <div class="container">
        <h2 class="page-header">
            睿途七个好习惯
        </h2>
        <ul>
            <li>开放</li>
            <li>克服困难</li>
            <li>时间管理</li>
            <li>情绪管理</li>
            <li>专注度</li>
            <li>阅读</li>
            <li>背诵</li>
        </ul>
    </div>
    <div class="container">
        <h2 class="page-header">核心产品</h2>
        <ul>
            <li>10-16岁阅读计划</li>
            <li>初高中标化培训</li>
            <li>名校计划</li>
            <li>SSAT培训</li>
        </ul>
    </div>
    <div class="container">
        <h2 class="page-header">学员评价</h2>
    </div>
    

    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</body>

<div class="container color1" >
     <div class="row">
         <div class="col-sm-3">
             <h5 class="center">联系我们</h5>
             <p>地址:北京市海淀区新中关大厦B南-5A层</p>
             <p>电话:400-8787-390</p>
             <p>邮箱:ruitu@oneplusone.cn</p>
             <p>官微:ruitu01(微信号)</p>
         </div>
         <div class="col-sm-3">
             <h5>媒体报道</h5>
         </div>
         <div class="col-sm-3">
             <h5>睿途服务</h5>
         </div>
         <div class="col-sm-3">
             <h5>睿途招聘</h5>
         </div>
     </div>
</div>

</html>

左右两侧画红框的地方是我希望填充的,求指点

阅读 16.7k
2 个回答

检查下,是不是你父元素已经固定宽度了

你把你的外层div和container换一个位置

例如这样

<div class="navbar navbar-fixed-top" id="mainMenu">
        <div class="container">
        </div>
</div>        
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进