Question

我使用的来源是：http://startbootstrap.com/template-overviews/simple-sidebar/

我无法制作它，以便我可以拥有两个简单的侧边栏。我试图这样做，所以页面的每一面都有一个（左边一个，右边一个）。现在，默认情况下侧边栏位于左侧。每个侧边栏将由2个单独的按钮激活。

**注意

< div id="wrapper" >

- 更改为

< div id="wrapper" class="toggled">

Answer 1

您可以通过添加html页面中的菜单及其在CSS中的相应样式来向右侧添加另一个侧边栏。

<强> HTML：

<!-- Right - Sidebar -->
    <div id="sidebar-wrapper-right">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                    Right toggle
                </a>
            </li>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Shortcuts</a>
            </li>
            <li>
                <a href="#">Overview</a>
            </li>
            <li>
                <a href="#">Events</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->

<强> CSS：

#sidebar-wrapper-right {
 z-index: 1000;
 position: fixed;
 right: 250px;
 width: 0;
 height: 100%;
 margin-right: -250px;
 overflow-y: auto;
 background: #000;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
}

在这里看看工作中的JS小提琴：DEMO

Answer 2

您需要在侧边栏包装类中为侧栏添加不同的样式，如下所示。

#sidebar-wrapper{
margin-left: 80%;// change this for your own properties
left: 20%
}

Double Bootstrap简单侧边栏

2 个答案: