bootstrap 左右两栏布局问题

小小的PHP能干啥
  • 181

在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>
回复
阅读 15.9k
1 个回答

bootstrap的栅格布局本来就是要按比例来,要固定宽度就应该手写。固定了宽度就没法响应式了,应该好好想想自己为什么要做这个事,谁提了个什么需求。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏