2017-04-06 1 views
0

오른쪽에 공백을 보여줍니다 brudenellridingstables.com몸은 내가 함께이 웹 사이트를 넣어

이 템플릿을 기반으로 - https://startbootstrap.com/template-overviews/creative/

난 데 문제는 오른쪽에 공백이 있다는 것입니다 페이지의

내가

body { 
    height: 100%; 
    width: 100%; 
    overflow-x: hidden; 
} 

을 시도하고이 공백 문제 하지만를 해결 오버 플로우 엑스 : 숨겨진; 줄은 탐색 표시 줄의 이전/이후 동작을 중단하고 페이지 아래쪽에있는 fa 아이콘을 표시하지 않게합니다.

페이지 본문의 오버 플로우 -x를 제어하는 ​​동안 navbar와 fa 아이콘의 기능을 모두 사용할 수 있습니까?

아니면이 문제를 해결하기 위해 CSS에서 할 수있는 다른 방법이 있습니까?

저는 CSS의 부모 자식 다이나믹스에 대해 잘 알고 있지 않습니다. 오른쪽에 공백을 일으키는 오버플로 -x 외에도 문제가 있습니까?

나는이 질문을 몇 번이나 보았지만 내 것과 같은 navbar는 아니었다. 나는 다른 사람들이 CSS에 대한 지식이 풍부 해짐에 따라 이러한 질문에 대답하는 것이 도움이 될 것이라고 생각합니다.

감사합니다.

+0

크롬의 공백이 보이지 않으므로 어떤 브라우저를 사용하고 있습니까? – StefanBob

+0

이 문제는 주로 a) 코드를 쳐다 보면서 "OK, 그래서 모든 섹션에 공백이있는 이유는 무엇입니까? 무엇이 다른 것입니까?" 그 다음에 b) 다른 섹션이 용기 또는 용기에 담겨져 있음을보고 c) 내 사고 과정이 @MichaelCoker에 의해 확인되었다. – widders

답변

6

당신은 .container 또는 .container-fluid A의 수 class="row bg-primary"

.row을 필요로하는 (header 후) 페이지의 중간에 섹션이 있습니다. 표시되는 내용은 -15px 왼쪽/오른쪽 margin.row이며, 일반적으로 .container 상위로 오프셋됩니다.

해당 행을 .container-fluid으로 감싸십시오.

+2

나는 똑같은 것을 쓰려고했다. 부트 스트랩 의미 론적 방법을 사용하여 템플릿을 만들지 않으므로 디자인이 왜 망가 졌는지 알 수 있습니다. –

+0

+1'.row { \t margin-right : 0; }'이 여분의 틈이 어디에서 비롯되는지 이해하는 시작입니다.) –

관련 문제