Как сделать два сайдбара фиксированной ширины в Twitter bootstrap?

Рейтинг: 0Ответов: 1Опубликовано: 27.02.2015

Добрый день, ситуация такая что сайт сверстан на twitter boostrap.
Имеет левый сайдбар, основное тело страницы, правый сайдбар.
Все в резиновой верстке (container-fluid).
Необходимо, чтобы два сайдбара имели строго определенные размеры в 250px, основное тело страницы растягивается по длине страницы.
Получается:

  • левый фиксированный по ширине 250 px
  • растягивающее тело контента
  • правый фиксированный по ширине 250px

При минимальной ширине @media (min-width: 767px), сайдбары переходят в основное тело страницы.

Пока идей маловато, строго определить размер width: 250px в сайдбарах, и верстка плывет.

Разделение по сайдбарам:

<div class="container-fluid">
    <div class="row">
        <?php echo View::factory('/templates/include/error'); ?>
        <?php echo View::factory('/templates/include/message'); ?>

        <div class="col-sm-12 col-md-12">
            <div class="row">
                <div class="col-md-3 col-sm-3 left-sidebar">
                    <?php echo $left_sidebar; ?>
                </div>

                <div class="col-md-6 col-sm-6 content">
                    <?php echo $content ?>
                </div>

                <div class="col-md-3 col-sm-3 right-sidebar">
                    <?php echo $right_sidebar; ?>
                </div>
            </div>
        </div>
    </div>
</div>

Надеюсь на вашу помощь )

css bootstrap
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Посмотреть пример.

HTML

<div class="container-fluid">
    <div class="row">
        <div class="wrapper">
            <div class="left-sidebar">Левый</div>
            <div class="content">Центральный</div>
            <div class="right-sidebar">Правый</div>
        </div>
    </div>
</div>

CSS (для новых браузеров)

@media (min-width: 768px) {
    .wrapper {
        overflow: auto;
    }
    .left-sidebar,
    .content,
    .right-sidebar {
        float: left;
    }    
    .left-sidebar,
    .right-sidebar{
        width: 250px;
    }
    .content {
        width: calc(100% - 250px * 2);
    }
}

CSS (для старых браузеров)

@media (min-width: 768px) {
    .wrapper {
        display: table;
        table-layout: fixed;
        width: 100%;
    }
    .left-sidebar,
    .content,
    .right-sidebar {
        display: table-cell;
    }
    .left-sidebar,
    .right-sidebar {
        width: 250px;
    }
}