Bootstrap4 фиксированные боковые панели / столбцы меню - PullRequest
Новая
       20

Bootstrap4 фиксированные боковые панели / столбцы меню

0 голосов
/ 11 октября 2018

У меня есть две панели слева и справа, которые оба являются Bootstrap4 col и основным содержимым col в середине.Левая и правая панели имеют фиксированное положение и «верх: 70 пикселей».Я ожидаю, что прокрутка будет работать для среднего столбца, который теперь работает нормально.

Но эти столбцы не выровнены должным образом, и есть пробел, и неясно, почему этот пробел добавлен.Какой-либо причине?Как это исправить?

enter image description here

<!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>
...