부트 스트랩 Navbar가 오른쪽에 간격을 만듭니다.

이 문제를 해결하는 다른 질문이 있음을 알고 있습니다. 그러나, 나는 그들을 시험해 보았다. 그리고 나의 특별한 이슈를 위해 아무것도 작용하지 않는 것처럼 보인다. 나는 또한 대부분이 꽤 오래되었고 부트 스트랩이 그 시간에 다소 바뀌 었다는 것을 알아 냈다. 그래서 나는 다시 묻습니다. 사과.부트 스트랩 Navbar가 오른쪽에 간격을 만듭니다.

freecodecamp의 팁에 따라 부트 스트랩을 더 잘 이해하기 위해 수정 한 주제가 codepen에서 발견되었습니다. 나는이 마지막 간단한 일로 머리카락을 찢어 버리고있다.

해당 없음 navbar가 오른쪽 여백 전체 사이트에 걸쳐 불필요한 공백을 만들고 있습니다.

은 현재 여기에 있습니다 : http://codepen.io/Er-c/pen/YGzkmG/

관련 코드 (내 생각)

<nav class="navbar navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header page-scroll"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
      <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 page-scroll" href="#page-top"> 
     </a> 
    </div> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
     <ul class="nav navbar-nav navbar-right links"> 
     <li class="hidden"> 
      <a class="page-scroll" href="#page-top"></a> 
     </li> 
     <li><a class="page-scroll" href="#about">About</a></li> 
     <li><a class="page-scroll" href="#services">Services</a></li> 
     <li><a class="page-scroll" href="#news">News</a></li> 
     <li><a class="page-scroll" href="#portfolio">Portfolio</a></li> 
     <li><a class="page-scroll" href="#clients">Clients</a></li> 
     <li><a class="page-scroll" href="#contact">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>

나는 오른쪽에있는 흰색을 통해 제거 할 수있는이 땅에서 무엇 :

Imgur

나는 완전히 붙어있다.

출처

2016-09-01 Er-c

문제는 실제 nav에서 오는 것이 아닙니다. 바로 도시 경관에 패딩입니다. .col- 클래스는 padding-right이되므로 main #about .row.pt-30 div 오른쪽에 패딩이 있습니다.

이 문제를 해결하는 방법은 다양합니다. SO 검색은

.dont-pad-me {padding-right: 0}

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dont-pad-me">

처럼, 당신에게 당신이 "아니오 권리 패딩"클래스를 추가 추천 많은 사람들을 제공하지만,이 경우에 나는 당신이 단지와

<div class="row pt-30"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
    <img class="peeping-tom" src="http://i59.tinypic.com/awsxg2.png" alt="#"> 
    </div> 
</div>

을 교체 할 생각됩니다

<div class="container-fluid pt-30"> 
    <img class="peeping-tom" src="http://i59.tinypic.com/awsxg2.png" alt="#"> 
</div>

출처

2016-09-01 22:34:02 henry

와우, 고마워. 이것은 믿을 수 –

다행입니다! 사이드 노트 : 부트 스트랩의'.col-'너비는 "이 크기 이상"이므로'class = "col-xs-12 col-sm-12 col-md-12 col-lg-12" 'class = "col-xs-12"'를 사용합니다. 당신이 * 오직 * 있다면.col-xs-12' 그리드를 사용할 필요가 없지만, class = "col-xs-3 col-lg-4"' – henry

과 같은 것을하고 싶다면 유용 할 수 있습니다. 이런 것들 : 나는 페이지를 검사 (또는이 경우 나는 펜을 검사했다)하고, 요소에'display : none'을 추가하고, 문제가있는 수평 스크롤이 사라지는 지 확인한다. 그렇다면'display : none'을 제거하고 그 요소의 자식을 추가하기 시작하십시오. 'body'로 시작한다면, 문제를 빨리 좁힐 수 있습니다. – henry

너가 navbar 안에 더 나은 이해를 얻고 싶으면,이 연결을 시도 하거든 아주 간단하고 명확하다. 한번 사용해보십시오 http://www.w3schools.com/bootstrap/bootstrap_navbar.asp

출처

2016-09-01 22:19:10

네, 고맙습니다 만, 필자가 현재 기본 폴더 대신 기본 네비게이션 막대를 붙여 넣을 때 감사합니다. 오른쪽의 공백은 여전히 있습니다. 남아있다. –

코드 스 니펫 또는 jsfiddle을 제공 할 수 있습니까? –

대답은 분명히 "overflow-x : hidden"입니다. 감사합니다. –

그냥 을 추가하십시오. overflow-x : hidden; 신체에 그리고 해결되었습니다.
P .: 문제는 navbar (문제가 아직 삭제되었지만 삭제됨)로 인해 발생하지는 않았지만 지금 당장 알려주는 코드가 너무 많습니다.

출처

2016-09-01 22:23:18

고맙습니다. 이상하게 생각합니다. 시도해 보았지만, 이제는 SASS를 통해 제대로 포맷하는 것을 잊었습니다. 우. 내 잘못이야. 정말 고맙습니다. –

부트 스트랩 Navbar가 오른쪽에 간격을 만듭니다.

답변

관련 문제