bootstrap如何调整到指定的布局大小
bootstrap能不能实现下面指定宽度的布局效果
左边820px,右侧350px,中间间距30px; 主体内容总宽度1200px;
示意图：
以下是我写的代码，请问如何调整，尽量贴代码出来，谢谢
<html lang="zh-CN"><!--@(window)--><!--@(document)--><head>
<title> bootstap布局调整</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="public/bootstrap.min.css" rel="stylesheet">
<script src="public/jquery.min.js"></script>
<script src="public/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" href="css/demo4.css"> -->
</head>
<style>
body{background:#ebebeb;color:#505050;}
/*以下代码使页面宽度达到1200px；*/
.container{padding:0;}
.col-lg-8{padding-left:0px;}
.col-lg-4{padding-right:0px;}
.col-lg-8,.col-lg-4{
border:1px solid #999;
}
.left,.right{
padding:50px;
background: white;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="left">
左侧部分:宽度820px
</div>
</div>
<div class="col-lg-4">
<div class="right">
右侧部分:350px
</div>
</div>
</div>
</div>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
很高兴你邀请我回答，但是我没用过bootstrap所以不怎么会。要是不用框架直接用css的话你也可以
用媒体查询来写，大于720以上的宽度可以
这样来写，如果小于720的就让大的div一样大来排列
响应手机端再添加
.col-xs-楼主代码中只有
.col-md-是适应桌面显示器的如果你想实现示意图指定宽度的布局就不要使用Bootstrap的栅格系统，默认分为12列，每列固定占比1/12，以此自适应各种设备，而你想在某个设备上固定的宽度布局，何不直接在对应div上设置，根本无需应用
.col-。你要将盒子先设置一下,因为如果你有边框的话，这1PX也会计算进去
学过bootstrap，但是一直没有用过，看了一下你的图片，觉得楼主的问题应该是两点原因导致的：一，你没有定义在手机屏幕下的流式布局，正是一楼说的那样。二，当在手机屏幕上时，尽管你给左右元素设了一个30px的定值，同时两个元素的宽都是百分比。但是，这30px所占用的空间大小的比例是不一样的，也就是说，当在手机屏幕的宽度下(.col-xs-)，你要么得适当缩小间隔，要么就再缩小一点两个元素的宽度（建议适当缩小间隔）。
没有使用过Bootstrap，只是结合自己的一点经验，希望能帮到你!