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>
检查下,是不是你父元素已经固定宽度了