bootstrap 左右两栏布局问题
在lg宽度时，下面代码中左侧区域用bootstrap的样式给个固定宽度值？而又不会影响右侧的左外边距样式。
右侧的左外边距样式，是为了区分左右两栏内容区别。
不是自己手写宽度样式，如果是那样就不用来问了。
附上代码说明问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="applicable-device" content="pc,mobile">
<meta name="renderer" content="webkit">
<meta name="theme-color" content="#28a745">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>电脑端测试</title>
<link rel='stylesheet' href='https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css?ver=beta' type='text/css' media='all' />
</head>
<body>
<div class="container-fluid px-0 bg-dark">
<div class="container px-0">
<div class="row">
<div class="col bg-light">左边这里的宽度，用bootstrap内置的样式能不能有具体宽度值？</div>
<div class="col-12 col-lg-4 bg-light ml-lg-1">请注意，右边这里有个左外边距的样式（ml-lg-1），用以区分左右之间有分隔</div>
</div>
<div>还有没有更好的写法？</div>
</div>
</div>
<script type='text/javascript' src='https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js?ver=3.2.1'></script>
<script type='text/javascript' src='https://cdn.bootcss.com/popper.js/1.11.1/umd/popper.min.js?ver=1.11.1'></script>
<script type='text/javascript' src='https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js?ver=beta'></script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
bootstrap的栅格布局本来就是要按比例来，要固定宽度就应该手写。固定了宽度就没法响应式了，应该好好想想自己为什么要做这个事，谁提了个什么需求。