부트 스트랩 4 : 접을 수있는 콘텐츠를 제어하는 방법?

부트 스트랩 4에서 접을 수있는 콘텐츠를 제어하는 방법은 무엇입니까? 예를 들어부트 스트랩 4 : 접을 수있는 콘텐츠를 제어하는 방법?

, 다음과 같은이 네비게이션 바 :

내가이 데모의 상태를 제어 할 수 있습니다.
특히,
상태 2에서, 나는 한 줄로 계속 줄 바꿈되지 않도록 검색 정보를 원합니다.
상태 3에서 검색 알림과 navbar-brand가 사라지지 않게하려면 ul 메뉴 만 사라집니다.

어떻게 만드시겠습니까?

코드 : 이것이 어떻게 작동하는지

docs

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

설명. 반응 형 토글 가능 메뉴에서 원하지 않는 콘텐츠를 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

부트 스트랩 4 : 접을 수있는 콘텐츠를 제어하는 ​​방법?

답변

관련 문제

부트 스트랩 4 : 접을 수있는 콘텐츠를 제어하는 방법?