Заставить содержимое соответствовать полной ширине после того, как боковая панель свернута Bootstrap

Я использую это обновленное свертывание боковой панели Bootstrap на своей странице, но здесь боковая панель и контент имеют фиксированную ширину для обоих div, основной контент не занимает полную ширину после того, как он рухнул.

HTML:

<div class="col-md-3 col-xs-1 p-l-0 p-r-0 collapse in" id="sidebar">...</div>

<main class="col-md-9 col-xs-11 p-l-2 p-t-2">...</main>

Но я хочу, чтобы после того, как боковая панель рухнула, основное содержимое должно занимать полную ширину.

Я проверил это и несколько других вопросов из-за переполнения стека, но не нашел того, что хочу


bootstrap-4 twitter-bootstrap-3
person G.L.P    schedule 25.01.2018    source источник
comment
Основной контент становится на всю ширину, когда боковая панель сворачивается там. Кроме того, вы не используете код Bootstrap 4.   -  person WebDevBooster    schedule 25.01.2018
comment
Bootstrap 3 и Bootstrap 4 полностью несовместимы друг с другом. Итак, вы должны решить (в своих тегах), о какой версии идет речь.   -  person WebDevBooster    schedule 25.01.2018
comment
я не использую bootstrap 4 здесь, но я пытаюсь перейти на bootstrap 4 на своей странице   -  person G.L.P    schedule 25.01.2018
comment
Ага. Я понимаю. Но это должно быть очень ясно в вашем вопросе.   -  person WebDevBooster    schedule 25.01.2018
comment
Итак, вы можете отредактировать свой вопрос, чтобы уточнить, что вы на самом деле хотите. (потому что codeply работает нормально).   -  person WebDevBooster    schedule 25.01.2018
comment
Я обновил демо codeply, чтобы четко показать разницу   -  person G.L.P    schedule 25.01.2018
comment
Пожалуйста, замените тег вопроса на bootstrap-4, так как Ахмед сделал неправильное редактирование.   -  person WebDevBooster    schedule 25.01.2018
comment
Просто обратитесь к этому обновленному примеру codeply.com/go/7ihZ0Mffyj   -  person Zim    schedule 27.01.2018
comment
Большое спасибо, ZimSystem, сейчас попробую это решение...   -  person G.L.P    schedule 29.01.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вот что нужно было сделать:

Сначала я заменил устаревшее col-xs на col. Затем я заменил оставшиеся col-md-9 col-11 на col. Сделанный!

Причина, по которой это работает, заключается в том, что первый столбец для боковой панели уже определен. col затем просто заполняет все доступное оставшееся пространство.

Вот рабочий код:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
    #sidebar .list-group-item {
        border-radius: 0;
        background-color: #333;
        color: #ccc;
        border-left: 0;
        border-right: 0;
        border-color: #2c2c2c;
        white-space: nowrap;
    }

    /* highlight active menu */
    #sidebar .list-group-item:not(.collapsed) {
        background-color: #222;
    }

    /* closed state */
    #sidebar .list-group .list-group-item[aria-expanded="false"]::after {
        content: " \f0d7";
        font-family: FontAwesome;
        display: inline;
        text-align: right;
        padding-left: 5px;
    }

    /* open state */
    #sidebar .list-group .list-group-item[aria-expanded="true"] {
        background-color: #222;
    }
    #sidebar .list-group .list-group-item[aria-expanded="true"]::after {
        content: " \f0da";
        font-family: FontAwesome;
        display: inline;
        text-align: right;
        padding-left: 5px;
    }

    /* level 1*/
    #sidebar .list-group .collapse .list-group-item  {
        padding-left: 20px;
    }

    /* level 2*/
    #sidebar .list-group .collapse > .collapse .list-group-item {
        padding-left: 30px;
    }

    /* level 3*/
    #sidebar .list-group .collapse > .collapse > .collapse .list-group-item {
        padding-left: 40px;
    }

    @media (max-width:48em) {
        /* overlay sub levels on small screens */
        #sidebar .list-group .collapse.in, #sidebar .list-group .collapsing {
            position: absolute;
            z-index: 1;
            width: 190px;
        }
        #sidebar .list-group > .list-group-item {
            text-align: center;
            padding: .75rem .5rem;
        }
        /* hide caret icons of top level when collapsed */
        #sidebar .list-group > .list-group-item[aria-expanded="true"]::after,
        #sidebar .list-group > .list-group-item[aria-expanded="false"]::after {
            display:none;
        }
    }

    /* change transition animation to width when entire sidebar is toggled */
    #sidebar.collapse {
        -webkit-transition-timing-function: ease;
        -o-transition-timing-function: ease;
        transition-timing-function: ease;
        -webkit-transition-duration: .2s;
        -o-transition-duration: .2s;
        transition-duration: .2s;
    }

    #sidebar.collapsing {
        opacity: 0.8;
        width: 0;
        -webkit-transition-timing-function: ease-in;
        -o-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        -webkit-transition-property: width;
        -o-transition-property: width;
        transition-property: width;

    }

    main{
        background-color:green;   
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 col-1 pl-0 pr-0 collapse in" id="sidebar">
            <div class="list-group panel">
                <a href="#menu1" class="list-group-item collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-dashboard"></i> <span class="hidden-sm-down">Item 1</span> </a>
                <div class="collapse" id="menu1">
                    <a href="#menu1sub1" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 1 </a>
                    <div class="collapse" id="menu1sub1">
                        <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 1 a</a>
                        <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 2 b</a>
                        <a href="#menu1sub1sub1" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 3 c </a>
                        <div class="collapse" id="menu1sub1sub1">
                            <a href="#" class="list-group-item" data-parent="#menu1sub1sub1">Subitem 3 c.1</a>
                            <a href="#" class="list-group-item" data-parent="#menu1sub1sub1">Subitem 3 c.2</a>
                        </div>
                        <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 4 d</a>
                        <a href="#menu1sub1sub2" class="list-group-item" data-toggle="collapse"  aria-expanded="false">Subitem 5 e </a>
                        <div class="collapse" id="menu1sub1sub2">
                            <a href="#" class="list-group-item" data-parent="#menu1sub1sub2">Subitem 5 e.1</a>
                            <a href="#" class="list-group-item" data-parent="#menu1sub1sub2">Subitem 5 e.2</a>
                        </div>
                    </div>
                    <a href="#" class="list-group-item" data-parent="#menu1">Subitem 2</a>
                    <a href="#" class="list-group-item" data-parent="#menu1">Subitem 3</a>
                </div>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-film"></i> <span class="hidden-sm-down">Item 2</span></a>
                <a href="#menu3" class="list-group-item collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-book"></i> <span class="hidden-sm-down">Item 3 </span></a>
                <div class="collapse" id="menu3">
                    <a href="#" class="list-group-item" data-parent="#menu3">3.1</a>
                    <a href="#menu3sub2" class="list-group-item" data-toggle="collapse" aria-expanded="false">3.2 </a>
                    <div class="collapse" id="menu3sub2">
                        <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 a</a>
                        <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 b</a>
                        <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 c</a>
                    </div>
                    <a href="#" class="list-group-item" data-parent="#menu3">3.3</a>
                </div>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-heart"></i> <span class="hidden-sm-down">Item 4</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-list"></i> <span class="hidden-sm-down">Item 5</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-clock-o"></i> <span class="hidden-sm-down">Link</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-th"></i> <span class="hidden-sm-down">Link</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-gear"></i> <span class="hidden-sm-down">Link</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-calendar"></i> <span class="hidden-sm-down">Link</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Link</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-bar-chart-o"></i> <span class="hidden-sm-down">Link</span></a>
                <a href="#" class="list-group-item collapsed" data-parent="#sidebar"><i class="fa fa-star"></i> <span class="hidden-sm-down">Link</span></a>
            </div>
        </div>
        <main class="col pl-2 pt-2">
            <a href="#sidebar" data-toggle="collapse"><i class="fa fa-navicon fa-lg"></i></a>
            <hr>
            <div class="page-header">
                <h1>Bootstrap 4 Sidebar Menu</h1>
            </div>
            <p class="lead">A responsive, multi-level vertical accordion.</p>
        </main>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

person WebDevBooster    schedule 25.01.2018
comment
К сожалению, забыл заменить отступы действительным кодом Bootstrap 4. Проверьте мой обновленный фрагмент кода сейчас. (все экземпляры классов p-l и p-r и p-t должны были быть заменены на pl, pr и pt соответственно. - person WebDevBooster; 25.01.2018
comment
На самом деле, pt-2 ничего не собирается делать в этом конкретном случае. Итак, если вы хотите немного отступить сверху, вам нужно добавить класс pt-2 в строку, а не добавлять его в столбец. (pt-2 означает отступы-верхние 2 единицы) - person WebDevBooster; 25.01.2018