Полная ширина контента, когда нет боковой панели с помощью Twitter BootStrap Css Toolkit - PullRequest
3 голосов
/ 05 декабря 2011

Я использую инструментарий начальной загрузки Twitter css для создания главной страницы приложения в asp.net webforms 2.0 (также .NET 2.0).Ничего из вопроса программирования, хотя это касается дизайна, у меня есть страница с

    Header
    Breadcrumb
    Maincontent
    -leftsidebar
    -pageContent
    -rightsidebar
    Footer

да, это один из тех вопросов на боковой панели, я получил HTML, как показано ниже

        <div class="row">
            <div class="span4">
                <!--Place holder for left sidebar-->
                <asp:ContentPlaceHolder runat="server" id="phLeftSidebar">
                </asp:ContentPlaceHolder>
            </div>
            <div class="content">
                <!--Place holder for main content-->
                <asp:ContentPlaceHolder runat="server" id="phPageContent">
                </asp:ContentPlaceHolder>
            </div>
            <div class="span4">
                <!--Place holder for right sidebar-->
                <asp:ContentPlaceHolder runat="server" id="phRightSidebar">
                </asp:ContentPlaceHolder>
            </div>
        </div>

Вопрос

На одной из страниц контента (дочерних) я не получил контента для левой боковой панели, и я ожидал, что средний контент также займет это место, поскольку правая боковая панель охватывает только 4 сетки.Так как же заставить content section занять доступное пространство при отсутствии либо right or left sidebar.

1 Ответ

3 голосов
/ 24 января 2012

Я ответил на вопрос, очень похожий на этот, вы можете посмотреть на результат здесь .

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

Просто добавьте это в свой основной CSS и добавьте класс в свою область .content в соответствии с потребностями боковой панели:

.fixed-fluid {
    margin-left: 240px;
}
.fluid-fixed {
    margin-right: 240px;
    margin-left:auto !important;
}
.fixed-fixed {
    margin: 0 240px;
}

Вот демонстрация того, как это выглядит:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...