Question

我有一个侧边栏，主要内容效果很好......问题在于，对于主要内容我正在使用引导类.container。

当前行为

当我缩小页面时，主要内容会弹出我的侧边栏。

所需行为

我希望.container缩小，以便侧边栏和主要内容适合屏幕。

我的代码

标记：

<!-- site footer -->
<div class="footer">
    <div class="footer-group footer-group-left">
        <span>
            Slide 1/10
        </span>
        <span>
            <i class="fa fa-user"></i>
            &nbsp; 2 users connected
        </span>
    </div>
    <div class="footer-group footer-group-center">
        <a href="#">
            <i class="fa fa-arrow-left"></i>
        </a>
        <a href="#">
            <i class="fa fa-arrow-right"></i>
        </a>
    </div>
    <div class="footer-group footer-group-right">
        <a class="text-success" href="#">
            <i class="fa fa-check"></i>
        </a>
        <a class="text-danger" href="#">
            <i class="fa fa-times"></i>
        </a>
        <span>
            00:00
        </span>
    </div>
</div>
<!-- end site footer -->

CSS

body {
    background: #fafafa;
    box-shadow: 0 0 5rem rgba(0, 0, 0, 0.25) inset;
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    margin: 0;
    overflow-x:hidden;
}

/* chatbox */
.chatbox {
    background: white;
    display: flex;
    flex: 0 0 300px;
    flex-direction: column;
    height: calc(100vh - 60px);
    margin-left:-300px;

    -webkit-box-shadow: 0px 0px 30px -10px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 30px -10px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 30px -10px rgba(0,0,0,0.75);
    transition: margin 0.2s ease 0s;
}
.chatbox.toggled {
    margin-left: 0px;
}
.chatbox-tab {
    top: 30px;
    padding: 10px;
    position: absolute;
    color: #ffffff;
    background: #393B3C;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-right: 4px solid #535353;
    transition: background 0.2s ease 0s;
}
.chatbox-tab:hover {
    background: #555555;
    cursor: pointer;
}
.chatbox-content {
    padding: 15px;
    flex: 1;
    overflow-x: hidden;
    overflow-y: hidden;
}
.chatbox-content:hover {
    overflow-y: auto;
}
.chatbox-footer {
    /*align-self:flex-end;*/
    display:flex;
    border-top:1px solid #eeeeee;
    /*height: 100px;*/
}
.chatbox-footer input {
    flex: 1;
    margin: 0;
    padding:10px;
    border: none;
}
.chatbox-footer button {
    background: #7cd97c;
    color: #ffffff;
    margin: 0;
    padding: 0;
    border: none;
    padding: 10px 15px 10px 15px;
}
.chatbox-footer button:hover {
    background: #5bb85b;
    cursor: pointer;
}

/* main content */
.content {
    display: flex;
    flex: 1;
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal: centering */
    height: calc(100vh - 60px);
}

/* footer toolbar */
.footer {
    background: #292B2C;
    display: flex;
    flex-basis: 100%;
    height: 60px;
    padding: 0 20px 0 20px ;
}
.footer-group {
    flex: 1;
    display: flex;
}
.footer-group-left {
    justify-content:flex-start;
}
.footer-group-center {
    justify-content:center;

}
.footer-group-right {
    justify-content:flex-end;

}
.footer-group a, .footer-group span {
    padding: 0 20px 0 20px;
    color: #ffffff;
    text-decoration: none;
    align-self:stretch;
    display: flex;
    align-items: center;
}
.footer-group a:hover {
    background: #444444;
}

Answer 1

内容正在下面，因为此内容的宽度为100%，并且旁边菜单的边距正在下降。
解决方案是在切换旁边时减少内容的宽度。
当切换旁边时，将课程.toggled切换到.content课程，并应用此css：

.content.toggled {
  width: calc(100% - 300px);
}

这是一个更新的小提琴：fiddle

Flexbox侧边栏可以阻止主要内容在小屏幕上的侧边栏下进行包装

1 个答案: