Bootstrap 4：如何控制可摺疊內容？

如何控制Bootstrap 4中的可摺疊內容？Bootstrap 4：如何控制可摺疊內容？

例如，該導航欄如下：

我想控制這個演示的狀態。
具體來說，
在狀態2中，我希望搜索通知不是換行符，仍然在一行中。
在狀態3中，我希望搜索通知和導航條品牌不會消失，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>

來源

2016-06-21 zwl1619

你只解釋你*不*想要的東西。你想要在表單和菜單項中發生什麼？ – ZimSystem

避免在實時項目中使用引導程序4，直到其穩定版本出來 –

在狀態2中，假設在一行上沒有足夠的空間用於表單..您希望瀏覽器具有水平滾動條嗎？ – ZimSystem

的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>

來源

2016-06-21 19:13:06 ZimSystem

Bootstrap 4：如何控制可摺疊內容？

回答

相關問題