트위터 부트 스트랩이 모바일 친화적이지 않습니다

-2

트위터 부트 스트랩을 배우는 프 로젝트에 대한 작업을하고 있지만 실제로 웹 사이트가 모바일 친화적이지 않고 대형 화면에서 나빠 보이는 문제가 있습니다.트위터 부트 스트랩이 모바일 친화적이지 않습니다

이

jsfiddle: http://jsfiddle.net/6LsG7/

끈적 끈적한 바닥 글도 내용을 많이 다루고 : 여기

는 링크입니다.

그럼 뭐가 궁금한가요? –

내 질문에 내가 잘못 했어? 무엇을 개선해야합니까? – user3185936

부트 스트랩에서 제공하는 클래스를 사용하지 않는 것으로 보입니다. 대신 자신의 ID를 작성하고 있습니까? 부트 스트랩에는 "container", "nav", "column"과 같은 클래스를 사용하여 구조화 된 프레임 워크가 있습니다.

반응 형 디자인을 얻으려면 사전 제공된 클래스를 따라야합니다. LayoutIt과 같은 WYSIWYG 부트 스트랩 레이아웃 메이커를 확인해 보시기 바랍니다.

2014-03-06 16:05:57

부트 스트랩에는 격자 모양의 아키텍처가 제공되므로 페이지에 섹션을 만들어서 모든 줄이 적절히 쌓이게 할 수 있습니다. 먼저 이것을 익히고 올바른 부분을 각 부분에 배정하십시오. 예 :

col-lg-12는 100 % 너비 섹션을 만듭니다.
COL-LG-11

COL-LG-6

등 다양한 단면의 50 %를 생성한다 ~
폭 90 % ... 섹션을 생성한다.

div 또는 섹션의 올바른 게재 위치를 만들려면 쌓을 수있는 모든 섹션에 행 클래스를 추가하십시오. 두 행의 측면이 측면에있는 경우 각 행에 col-lg-6을 추가하면 각 행이 서로 나란히 배치되고 각 행 상단에 모바일에 배치됩니다.

자, 지금 당장 봤던 명백한 문제들.

body 태그 사이에 페이지가 포함될 래퍼 클래스 div를 만들고 너비를 정의하십시오.

너무 많은 위치 지정을 사용하지 마십시오. 특별히 위치 : 고정. 이것이 물건을 끈적하고 지저분하게 만드는 것입니다. 당신은 마진을 사용하고, 패딩을하고, 떠 다니고, 속성을 표시하여 적절하게 정렬합니다.

코드를 전달하기 전에 시도해보십시오. 나는 당신의 두뇌를 먼저보고 싶다. 그러면 우리는 더 많은 문제를 해결할 것입니다.

2014-03-06 16:40:05 LOTUSMS

답변