Bootstrap - 切换侧边栏的图标

Question

我有这样的布局：

我希望当用户点击橙色按钮时，侧栏会收缩并且只有图标可见。对于移动端，应完全收缩，当用户点击按钮时，只有图标可见。行为应像this，但我不知道如何使其工作。

目前我的标题是：

<div class="navbar-header">
  <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#menu-toggle" onclick="toggle()"><i class="fa fa-bars"></i></a>
  <a class="navbar-brand" href="#">...</a>
</div>

但我不知道如何使其在单击时折叠。谢谢。

- ayasha

---

请问您能否将导航栏的所有代码都发布出来？ - Wowsk

请确保在 jQuery 或 JavaScript 中调用触发切换功能的按钮类的确切名称。同时，检查您的 jQuery 链接是否使用了确切的链接。否则它将无法正常工作。 - claudios

请查看此插件：http://www.jasny.net/bootstrap/components/#navmenu-offcanvas - Stephan

Answer 1

粗略地说，您可以为图标和相关文本分配两个类（一个用于图标，一个用于文本），例如“icon”类和“text”类，并在按钮单击时切换（隐藏和显示）具有“text”类的元素。然后，在回调中，您可以动画调整侧边栏的大小。

编辑2：改进的示例

$('#togglebutton').click(function() {
    if ($(window).width() > 500) { //your chosen mobile res
      $('.text').toggle(300);
    } else {
      $('.menu').animate({
        width: 'toggle'
      }, 350);
    }
});

​.wrapper { width: 100% }
.menu {
      background: #222;
      float: left;
      display: block;
}

.icon { max-width: 1em }

.menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0.2em 0.5em;
}

.menu li { margin: 0 }

.menu a, .menu a:visited {
      color: white;
      text-decoration: none;
}

.text {
      display: inline;
      margin: 0;
}

.content { display: block; }

button { margin: 1em; }

@media only screen and (max-width: 500px) {
  .text {
      display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="menu">
    <ul>
      <li>
        <a href="#">
          <img class="icon" src="http://bit.do/iconUrl">
          <p class="text">Text 1</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img class="icon" src="http://bit.do/iconUrl">
          <p class="text">Text 2</p>
        </a>
      </li>
    </ul>
  </div>
  <div class="content">
    <button id="togglebutton">&#9776;</button>
  </div>
</div>

我希望我的建议能够给您提供一个IT技术方面的普遍想法。

- CalCon

---

现在更清楚了...但是如何重现OP在链接帖子中描述的行为呢？ - Stephan

您的意思是“__...针对移动设备应该完全缩小...__”，通过CSS媒体查询，在某个分辨率宽度下应该隐藏.text类。 - CalCon

我的意思是：从您的代码片段中，如何创建像这个示例一样的示例：http://webapplayers.com/inspinia_admin-v2.5/widgets.html# - Stephan

我的代码片段是一个通用的例子。我是stackoverflow上的新手，所以我可能会误解，在这个网站上，回答问题的人必须根据请求实现一个工作吗？如果我提供的答案不符合网站的目的，我很抱歉，我可以删除它。 - CalCon

不要删除它，而是改进它。 - Stephan

Answer 2

更新 2019

Bootstrap 4

在Bootstrap 4中，也可以实现侧边栏的功能，但仍需要额外的CSS来处理侧边栏的状态。

https://www.codeply.com/p/e5IcpodgE2

Bootstrap 3

您可以创建一个“离线画布”侧边栏，然后使用Bootstrap的响应式实用类来切换图标的显示。

<div class="wrapper">
        <div class="row row-offcanvas row-offcanvas-left">
            <!-- sidebar -->
            <div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
                <ul class="nav" id="menu">
                    <li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-list"></i> <span class="collapse in hidden-xs">Stories</span></a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></a></li>
                </ul>
            </div>

            <!-- main right col -->
            <div class="column col-sm-9 col-xs-11" id="main">
                <a href="#" data-toggle="offcanvas" class="btn btn-default"><i class="fa fa-navicon"></i></a>
                <p>
                    content...
                </p>
            </div>
        </div>
</div>

https://www.codeply.com/p/uunNOeQAqo

- Zim