修复画布边栏

时间:2015-03-09 12:30:57

标签: html css twitter-bootstrap canvas

我已在我的项目中使用Twitter Bootstrap实现了画布上的侧边栏模板,并将其修改为小型/中型视图'。问题是我试图为x修复它,但它确实消失了。

如何正确修复?

CSS

html,
body {
    max-width: 100%;
    overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
    padding-top: 70px;
}

.sidebar-offcanvas {
    position: fixed;
    top: 50px;
    right: 0;
    height: 100%;
    width: 200px;
}
.sidebar-offcanvas, .sidebar-offcanvas a {
    background-color: #ECF0F1;
    border: none;
}
/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
    .row-offcanvas {
        position: relative;
        -webkit-transition: all .5s ease-out;
        -o-transition: all .5s ease-out;
        transition: all .5s ease-out;
    }

    .row-offcanvas-right {
        right: 0;
    }

    .row-offcanvas-left {
        left: 0;
    }

    .row-offcanvas-right
    .sidebar-offcanvas {
        right: -50%; /* 6 columns */
    }

    .row-offcanvas-left
    .sidebar-offcanvas {
        left: -50%; /* 6 columns */
    }

    .row-offcanvas-right.active {
        right: 50%; /* 6 columns */
    }

    .row-offcanvas-left.active {
        left: 50%; /* 6 columns */
    }

    .sidebar-offcanvas {
        position: fixed;
        top: 0;
        width: 50%;
    }
}

HTML

<div class="container">

    <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-9 col-md-10">
            <my-notification></my-notification>
            <div ui-view></div>
        </div>

        <div class="sidebar-offcanvas" id="sidebar">
            <div class="list-group">
                .. omitted
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

我不确定你用CSS尝试了什么,但你的问题是

.row-offcanvas-right
.sidebar-offcanvas {
    right: -50%; /* 6 columns */
}

结合使用
.sidebar-offcanvas {
    position: fixed;
    top: 0;
    width: 50%;
}

这导致.sidebar-offcanvas宽度为50%,然后其正确位置从零下50%开始。这会导致元素有效地消失,因为它被推出屏幕的总宽度向右移动。因此,根据您希望实现的目标,您需要将right: -50%;更改为其他内容,例如right: 0px;