Bootstrap 4：如何控制可折叠内容？答案

【问题标题】：Bootstrap 4 : How to control collapsible content?Bootstrap 4：如何控制可折叠内容？
【发布时间】：2017-02-26 19:34:26
【问题描述】：

如何在 Bootstrap 4 中控制可折叠内容？

例如，这个导航栏如下：

我想控制这个演示的状态。
具体来说，
在状态 2 中，我希望搜索通知不是换行符，仍然是一行。
在状态 3，我希望 search inform 和 navbar-brand 不消失，ul 菜单只消失。

怎么做？

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.3.2/css/tether.min.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-fixed-top navbar-light bg-faded">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
        &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
        <a class="navbar-brand" href="#">Responsive navbar</a>
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
        </ul>
        <form class="form-inline pull-xs-right">
            <input class="form-control" type="text" placeholder="Search">
            <button class="btn btn-success-outline" type="submit">Search</button>
        </form>
    </div>
</nav>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.3.2/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</body>
</html>

【问题讨论】：

你只解释了你不想要的。您希望表单和菜单项如何处理？
避免在实时项目中使用 bootstrap 4，直到它的稳定版本出来
在状态2中，假设一行没有足够的空间放置表单..你想让浏览器有一个水平滚动条吗？
@Skelly 没有。我希望它们同步减少。

标签： html css twitter-bootstrap twitter-bootstrap-4

【解决方案1】：

docs 解释了它是如何工作的。从collapse 中删除您不希望在响应式可切换菜单中出现的任何内容。您可能需要调整 CSS 以减小表单的宽度。

http://www.codeply.com/go/eaTFM5w3S6（阿尔法 2）

<nav class="navbar navbar-fixed-top navbar-light bg-faded">
    <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
        &#9776;
    </button>
    <a class="navbar-brand" href="#">Responsive navbar</a>
    <form class="form-inline pull-xs-right">
        <input class="form-control" type="text" placeholder="Search">
        <button class="btn btn-success-outline" type="submit">Search</button>
    </form>
    <div class="collapse pull-xs-left navbar-toggleable-sm" id="exCollapsingNavbar2">

        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
        </ul>
    </div>
</nav>

【讨论】：