Question

我在左右两个窗格中分别是Bootstrap4列和中间的一个主要内容列。左窗格和右窗格均具有固定位置和“ top：70px”。我希望滚动条可用于中间的col，现在可以了。

但是这些列没有正确对齐，并且有一个空格，不清楚为什么要添加此空格。任何原因？如何解决？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>

</head>
<body>
    <div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12" style="padding-top: 10px; text-align: center;height:50px;background-color: #205081;color:#FFF">
                Simple Header
            </div>
        </div>
        <div class="row" style="padding: 20px">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="height: 200px; border: 1px solid green;top:70px;position: fixed;">
                <div>
                    Fixed Left Pane
                </div>
            </div>
            <div class="col-lg-4 offset-lg-4 col-md-4 offset-md-4  col-sm-4 offset-sm-4 col-xs-4 offset-xs-4" style="height: 1200px; border: 1px solid blue;text-align: center;">
                <div>
                    Main Content
                </div>
            </div>
            <div class="col-lg-4 offset-lg-8 col-md-4 offset-md-8 col-sm-4 offset-sm-8 col-xs-4 offset-xs-8" style="height: 200px; border: 1px solid green;top:70px;position: fixed;">
                <div>
                    Fixed Right Pane
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap4固定侧窗格/菜单栏

0 个答案: