부트 스트랩 navbar 요소가 중심에 너무 많이 있습니다.

Question

부트 스트랩을 사용하여 내 페이지의 네비게이션을 만들었지 만 요소가 가운데쪽으로 너무 움푹 들어가있어 측면에 많은 공간이 남았습니다. 페이지의 추가 너비를 활용하기 위해 더 많이 확장 할 수있는 방법이 있습니까? 여기

내 HTML/CSS입니다. 기본적으로 https://codepen.io/bootstrapped/pen/KwYGwq?editors=1100

HTML에서 예 6에 나섭니다 :

<nav class="navbar navbar-inverse navbar-fixed-top example6"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar6"> 
      <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 text-hide" href="/fedhr/Fed_Splash_New.do"/> 
     </div> 
     <div id="navbar6" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="/fedhr/Fed_Splash_New.do"><span class="glyphicon glyphicon-home"></span></a></li> 

      <li><a href="#Profile"><span class="glyphicon glyphicon-user"></span>$[SP] <g:no_escape>${jvar_user_name}</g:no_escape> <g:no_escape>${jvar_user_lastname}</g:no_escape></a></li> 
      <li><a href="#Tasks"><span class="glyphicon glyphicon-list-alt"></span>$[SP] Tasks</a></li> 
      <li><a href="#About"><span class="glyphicon glyphicon-plane"></span>$[SP] About Us</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-phone-alt"></span>$[SP] Contact Us <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="mailto:someone@example.com?Subject=Hello%20again">Email Us</a></li> 
       <li><a href="/$chat_support.do?queueID=cd846e1747a102009eaff6df1d9a7175" target="_blank">Chat with HR</a></li> 
      </ul> 
      </li> 
      <li><a href="../logout.do"><span class="glyphicon glyphicon-log-out"></span>$[SP] Logout</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 

CSS :

.example6 .navbar-brand{ 
    background: url(#) center/contain no-repeat; 
    width: 200px; 
} 

Answer 1

당신이 (가) .navbar 오른쪽 클래스 내부의 재산 margin-right을 사용할 수 있습니다. 그러나 <ul>은 컨테이너 상위 클래스에서 오버플로됩니다.

.navbar-right { 
    float: right!important; 
    margin-right: -20px; 
} 

Answer 2

<div class="container"> 세트 뷰포트 폭에 따라 고정 된 폭과 내부의 콘텐츠의 폭 (http://getbootstrap.com/css/#overview-container 참조). 콘텐츠를 사용 가능한 전체 너비로 늘리려면 <div class="container-fluid">

Answer 3

<div class="container">이 아니라 <div class="container-fluid">을 사용하십시오.

이렇게하면 뷰포트의 사용 가능한 너비에 맞게 조정됩니다. 에

더 : Container-fluid vs .container

Answer 4

그 때문에 ".container"클래스는 양쪽에 여백을 추가합니다. 대신에 .container-fluid 클래스를 사용하십시오.

<div class="container-fluid"> 

고해상도 모니터에서 보시는 것이 좋을 것 같습니다.