너비가 769px 인 너비가 표시됩니다.

Question

부트 스트랩 navbar-fixed-top 메서드를 사용하여 부동 탐색 모음을 만듭니다.

내가 알아낼 수있는 몇 가지 문제가 :

• 내가 769px로 화면 폭을 줄일 때 왜 내 로고 및 내 사회적 아이콘이 사라지고있다?
• 내 로고와 소셜 아이콘이 페이지 상단에있는 이유는 무엇입니까?
• 내 소셜 아이콘이 너무 작아서 서로 옆에 모여 있습니다. 어떻게 변경합니까?

http://codepen.io/dhruvghulati/pen/qrdNBm

좀 더 표준은 지속적인 탐색 모음을 가지고 어떻게해야합니까?

Answer 1

.collapse 클래스는 다음과 같습니다 화면이 768px 폭까지 .collapse이 표시되지된다는 것을 의미합니다

@media (min-width: 768px) 
.navbar-collapse.collapse { 
    display: block!important; 
    height: auto!important; 
    padding-bottom: 0; 
    overflow: visible!important; 
    visibility: visible!important; 
} 

합니다. 또한이 (로고에 사용)입니다

: 사회 아이콘 컨테이너에 사용되는 .navbar-right 유사한 클래스가 화면 768px 폭 때문에 왼쪽 로고 부동하게

@media (min-width: 768px) 
.navbar-left { 
    float: left!important; 
} 

.

Answer 2

내가 생각하는 그 대신

Answer 3

당신은 아마 navbars에 대한 자세한 정보를 얻을 수있는 공식 Bootstrap docs을 방문해야 position: relative;를 사용하여 position:absolute; 시도를 사용하고 있기 때문에. 나는 당신의 네비게이션 바의 템플릿으로 사용하고 거기에서 갈 것 :

<nav class="navbar navbar-default"> 
<div class="container-fluid"> 
<!-- Brand and toggle get grouped for better mobile display --> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Brand</a> 
</div> 

<!-- Collect the nav links, forms, and other content for toggling --> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
    <li><a href="#">Link</a></li> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">One more separated link</a></li> 
     </ul> 
    </li> 
    </ul> 
    <form class="navbar-form navbar-left"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Search"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
    <ul class="nav navbar-nav navbar-right"> 
    <li><a href="#">Link</a></li> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     </ul> 
    </li> 
    </ul> 
</div><!-- /.navbar-collapse --> 

기본적으로 부트 스트랩은 화면 크기에 햄버거 버튼을 사용하여 탐색 링크를 대체합니다. 또한 항상 위의 코드에서 알 수 있도록 로고에 적절한 클래스를 지정해야합니다. 탐색 막대를 페이지 상단에 고정 시키려면 탐색 태그에 navbar-fixed-top 클래스를 추가하기 만하면됩니다. 여는 태그는 다음과 같아야합니다 : <nav class="navbar navbar-default navbar-fixed-top">.

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

을 그리고있다 :