我已在我的项目中使用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>
答案 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;
。