Bootstrap 水平到垂直导航答案

【问题标题】：Bootstrap horizontal to vertical navigationBootstrap 水平到垂直导航
【发布时间】：2015-06-08 23:50:44
【问题描述】：

我正在寻找一种方法，将下拉菜单项的水平导航行转换为垂直堆叠的导航，该导航在进入较小的断点时会像手风琴一样工作/发挥作用。

我不希望将此菜单组转换为汉堡菜单，而是希望它像折叠功能的手风琴一样简单地堆叠在较小的断点上（到其容器的宽度)。

我搜索了许多网站/视频，但由于某种原因，我很难完成这项工作（同样，主要是由于我缺乏引导知识）。

我很困惑这是否应该由 css 中的媒体查询处理，或者可能是 javascript 函数或某种组合？另外，我应该使用 Bootstrap 的“药丸”导航样式以外的其他导航方法进行设置吗？

AGGGGHHH（在这里插入大脑爆炸声）！ :)

我在下面附上了我的工作 HTML 代码。如果有人有建议或可以指出我正确的解决方案方向，我将不胜感激！

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Nav-Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">  

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>


<body>


<section class= "container" id="mast-container">
        <div class="row">
    <div class="col-lg-8 navbar-collapse collapse">
                <ul class="nav nav-pills" id="main-nav" role="navigation">
                    <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle-main" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                    ITEM 1<br><span class="glyphicon glyphicon-menu-down"></span>
                    </a>
                <ul class="dropdown-menu main-nav" role="menu">
                    <li><a href="#">Dropdown Item1</a></li>
                    <li><a href="#">Dropdown Item2</a></li>
                    <li><a href="#">Dropdown Item3</a></li>
                    <li><a href="#">Dropdown Item4</a></li>
                </ul>
                    </li><!--/ITEM 1 -->

            <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                    ITEM 2<br><span class="glyphicon glyphicon-menu-down"></span>
                    </a>
                <ul class="dropdown-menu main-nav" role="menu">
                    <li><a href="#">Dropdown Item1</a></li>
                    <li><a href="#">Dropdown Item2</a></li>
                    <li><a href="#">Dropdown Item3</a></li>
                    <li><a href="#">Dropdown Item4</a></li>
                </ul>
                    </li><!--/ITEM 2 -->


            <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                    ITEM 3<br><span class="glyphicon glyphicon-menu-down"></span>
                    </a>
                <ul class="dropdown-menu main-nav" role="menu">
                    <li><a href="#">Dropdown Item1</a></li>
                    <li><a href="#">Dropdown Item2</a></li>
                    <li><a href="#">Dropdown Item3</a></li>
                    <li><a href="#">Dropdown Item4</a></li>
                </ul>
                    </li><!--/ITEM 3 -->



            <li role="presentation" class="dropdown"><!--RESEARCH main-nav -->
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                    ITEM 4<br><span class="glyphicon glyphicon-menu-down"></span>
                    </a>
                <ul class="dropdown-menu main-nav" role="menu">
                    <li><a href="#">Dropdown Item1</a></li>
                    <li><a href="#">Dropdown Item2</a></li>
                    <li><a href="#">Dropdown Item3</a></li>
                    <li><a href="#">Dropdown Item4</a></li>
                </ul>
                    </li><!--/ITEM 4 -->

                    <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                    ITEM 5<br><span class="glyphicon glyphicon-menu-down"></span>
                    </a>
                <ul class="dropdown-menu main-nav" role="menu">
                    <li><a href="#">Dropdown Item1</a></li>
                    <li><a href="#">Dropdown Item2</a></li>
                    <li><a href="#">Dropdown Item3</a></li>
                    <li><a href="#">Dropdown Item4</a></li>
                </ul>
                    </li><!--/ITEM 5 -->
        </ul>
            </div><!--/main-nav-->
        </div><!--/row-->
    </section>




<!-- javascript -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

【问题讨论】：

它将是cs和javascript的组合。并且非常复杂。我认为您需要发布代码的工作 jsfiddle，以便人们可以修改它。他们不会为你做这一切。
Hanoncs，我做了更多的研究，当你提到它很复杂时，你并没有撒谎！我在 CodePen link 上找到了一个半封闭示例，并注意到为了获得我正在尝试的功能，我需要合并 js、css 和 flexbox。这给了我一丝希望。谢谢！
帅哥很高兴你接近了。 Flexbox 是天赐之物，但请记住，旧浏览器对它的支持为零，即使是最近的浏览器，您也需要使用所有不同前缀版本的 flexbox。这是来自 csstricks 的一篇很棒的文章。 css-tricks.com/using-flexbox看了那个codepen demo，你确定要花时间在这上面吗？也许你可以得到一个很好的网站设置，当你有更多的经验时，你可以这样做。
另外，仅供参考，flexbox 只是 CSS

标签： html css twitter-bootstrap navigation

【解决方案1】：

您对 Bootstrap 的依恋程度如何？您对导航的偏好表明 Foundation 可能是 CSS 框架的更好自然选择 http://foundation.zurb.com/ 。 Bucking a CSS frameworks 首选导航在一定程度上否定了这一点。

Foundation 通过构建两组导航标记来接近垂直导航，第一组在页面内容旁边浮动，第二组标记是传统的水平导航。

起初这种方法对我来说似乎很尴尬，但它可以让每个元素成为自己的东西，这是一个很好的权衡。祝你好运。

【讨论】：