我们在网站上使用的是Bootstrap 3，我对一个设计新颖的模板有一个要求，该模板的某些元素实际上并没有遵循bootstrap网格。我试图使其正常工作，但没有成功。我试图在下图中解释问题。有人知道我该如何解决吗？
3 回答
郎朗坤
TA贡献1921条经验 获得超9个赞
您可以使用以下代码：
<!DOCTYPE html>
<html class=" desktop landscape">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Example</title>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<style type="text/css">
.side{background-color: lightgrey;
}
.middle{background-color: green;
}
.red{background-color: red;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- 1st section -->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 middle">
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side">
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<!-- 2nd section -->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 red" >
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="row">
<div class="col-lg-6 col-lg-6 col-md-6 col-xs-6 col-sm-6 red">
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-6 col-md-6 col-xs-6 col-sm-6">
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<!-- 3rd section -->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side" >
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 middle">
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 side">
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</body>
</html>
- 3 回答
- 0 关注
- 485 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消