Question

我创建了一个包含twitter bootstrap的页面，其中包含使用网格系统的2列。在左侧，我有一个堆叠的药丸列表（使用类.nav-stacked）。当页面的宽度低于768px时，带有内容的右列落在堆叠的药丸下，堆叠的药丸填满了整个宽度，我喜欢。

我需要的是当页面小于768时，堆叠的药丸会折叠并显示切换按钮（带3行的按钮）。我怎么能做到这一点？我觉得我错过了一堂课或什么的，呵呵

代码中最基本的形式：

<div class="row">
    <div class="col-sm-4">
        <ul class="nav nav-pills nav-stacked">
            <li role="presentation" class="active"><a href="/link.html">Link 1</a></li>
            <li role="presentation"><a href="/link.html">Link 2</a></li>
            <li role="presentation"><a href="/link.html">Link 3</a></li>
        </ul>
    </div>
    <div class="col-sm-8">
        MY CONTENT GOES HERE
    </div>
</div>

谢谢你们

Answer 1

请查看以下CodePen（Full page view，以便更好地测试响应功能）。这就是你要找的东西吗？

后代代码：

<强> HTML

<div class="row">
    <div class="col-sm-4">
        <button type="button" class="btn btn-default xs-toggle" data-toggle="collapse" data-target="#pills">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <ul class="nav nav-pills nav-stacked xs-collapse" id="pills">
            <li role="presentation" class="active"><a href="/link.html">Link 1</a></li>
            <li role="presentation"><a href="/link.html">Link 2</a></li>
            <li role="presentation"><a href="/link.html">Link 3</a></li>
        </ul>
    </div>
    <div class="col-sm-8">
        MY CONTENT GOES HERE
    </div>
</div>

<强> CSS

.xs-collapse {
  display: none;
  visibility: hidden;
}

@media (min-width: 768px) {
  .xs-toggle {
    display: none;
    visibility: hidden;
  }
  .xs-collapse {
    display: block;
    visibility: visible;
  }
}

/* Styles for toggle button (optional) */

.xs-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.xs-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}

.btn-default.xs-toggle .icon-bar {
  background-color: #888;
}

所以基本上这样做是以更通用的格式重新创建用于导航栏切换功能的样式。已创建类xs-toggle和xs-collapse以表示对屏幕尺寸＆lt;屏幕尺寸生效的切换功能。 768px（默认情况下与Bootstrap中使用的xs类相同）。因此，您可以通过添加适当的sm，lg等样式版本将其扩展到其他响应宽度。该样式的其余部分用于切换按钮本身。这是Bootstrap中仅用于导航栏的特殊情况。您可以删除它们，然后根据需要使按钮看起来。

Bootstrap：折叠选项卡列表到下拉列表

1 个答案: