Question

使用Bootstrap 4，我有一个边栏，当单击按钮时，我想显示/隐藏它。我已经在桌面上完美地工作了，它隐藏了侧边栏，主要内容区域占据了其余空间：

HTML：

<a class="sidebar-toggle" href="#"><i class="fa fa-bars"></i></a>

<div class="d-flex wrapper">
    <div class="sidebar sidebar-dark bg-dark">
        <ul class="list-unstyled">
            <li><a href="#"><i class="fa fa-fw fa-link"></i> Menu Item</a></li>
            <li><a href="#"><i class="fa fa-fw fa-link"></i> Menu Item</a></li>
            <li><a href="#"><i class="fa fa-fw fa-link"></i> Menu Item</a></li>
        </ul>
    </div>

    <div class="content m-4">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

CSS：

.sidebar {
    min-width: 220px;
    max-width: 220px;
    min-height: calc(100vh - 56px);
}
.wrapper-toggled .sidebar {
    margin-left: -220px;
}

JS：

$(document).on('click', '.sidebar-toggle', function (event) {
    event.preventDefault();
    $('.wrapper').toggleClass('wrapper-toggled');
});

我的问题是我希望在移动设备上的行为略有不同。默认情况下，侧栏应隐藏，并在单击按钮时显示。当显示侧边栏时，我希望它将所有内容向右移动。我已经进行了这项工作，但是它导致水平滚动条以显示其余.content剪切内容。

这是代码：

@media (max-width: 768px) {
    .sidebar {
        margin-left: -220px;
    }
    .wrapper-toggled {
        transform: translate(220px, 0);
    }
}

我尝试将overflow-x: hidden添加到正文中，并添加.wrapper类，但这没有用。

此外，当显示侧边栏时，似乎会弄乱移动设备上的总视口高度。显示侧边栏时，页面高度会增加。

是否有更好的方法？我该如何解决这个问题？

Answer 1

在getResponses = () => { // Check that responses prop is an array before // attempting to render child Comment components if(!Array.isArray(this.props.responses)) { return null; } return this.props.responses.map(p => { return ( <Comment author={p.author} avatar={p.avatar} timeStamp={p.timeStamp} text={p.text} /> ); }); };和overflow-x: hidden中都添加body似乎已经解决了这个问题。

使用平移变换停止水平滚动

1 个答案: