2017-04-24 4 views
0

부트 스트랩 v3.3.7을 사용하는 웹 사이트에서 작업하고 있습니다. 그러나 문제는 내가 모바일보기로 갈 때 행이 화면 너비에서 벗어날 때 발생합니다. 및 디자인 내 사업부 구조 몇 가지 문제를 일으키는 것은이 같은휴대 기기에서 부트 스트랩 반응 문제가 발생했습니다.

<div class="container"> 
<div class="row" id="something"> 
    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12" id="left-side"> 
     <div class="row"> 
     <div class="col-sm-5 col-xs-5" ></div> 
     <div class="col-sm-7 col-xs-7" ></div> 
     </div> 
    </div> 
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12"> 
    <div class="row"> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
    </div> 
</div> 

</div> 

사람이 스크롤 막대는 페이지 하단에 오는 이유는이 구조에 어떤 문제가 있는지 나를 도울 수 있습니까? 나는

#something{margin:0px} 

를 추가 할 때 다음 문제를 일부 특정 이유로

미안 내가 공유 할 수 없습니다 내 정확한 코드를 수정 언급하고 싶습니다. ty

+0

Fiddle을 제공 하시겠습니까? –

+0

'com-sm-4'는'col-sm-4'이어야합니다. – herrh

+1

모든 것이이 코드에서 잘 작동합니다 .. 문제는 내부 요소 중 일부입니다 –

답변

1

예, 기본적으로 부트 스트랩의 행에 대해 왼쪽 및 오른쪽의 여백은 외부 div의 왼쪽 및 오른쪽의 영역 (왼쪽 및 오른쪽 div의 15px의 패딩)을 덮기 위해 -15px입니다. 아마도 컨테이너 또는 어떤 col div 그래서이 여백을 제거하면 사이트의 구조가 정렬되지 않습니다 및 모바일 하단에 스크롤 막대를 만듭니다. 모바일 너비에 #something {margin : 0px}을 (를) 친절하게 제거하십시오. 아래쪽에 스크롤 막대를 숨기려면 css : 본문 (overflow-x : hidden;)을 추가하십시오.

다른 문제가있는 경우 알려주십시오.

관련 문제