2014-10-16 5 views
0

부트 스트랩을 사용하는 방법을 스스로 가르쳐려고하고 있으며 모바일 장치에 표시 할 때 웹 사이트를 올바르게 포맷 할 수 없습니다. 모바일 장치를 에뮬레이션 할 때 브라우저의 크기를 조정할 때 웹 사이트의 서식이 올바르게 지정되어 있습니다. 부트 스트랩이 모바일 용으로 포맷되지 않았습니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 


<link href="bootstrap.min.css" rel="stylesheet" > 

</head> 

<body> 

<div class="container-fluid"> 
<h1>HERE IS WHERE THE CONTAINER IS. </h1> 
<div class="row-fluid"> 

<div class="col-lg-4 col-md-4 col-sm-4"> 
<h2>Paragraph 1</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum leo ut posuere suscipit. Suspendisse sed ex venenatis, tempus quam sit amet, porta sapien. Maecenas in nibh leo. In elementum eleifend odio, id pellentesque justo. Cras vitae placerat mauris. Aliquam erat volutpat. Integer faucibus eget nulla eget mollis. Pellentesque interdum vitae purus ut venenatis. Fusce hendrerit ultricies dignissim.</p> 
</div><!--col-lg-4 col-md-4 col-sm-4--> 

<div class="col-lg-4 col-md-4 col-sm-4"> 
<h2>Paragraph 2</h2> 
<p>Duis elementum quam sit amet ante imperdiet, id bibendum nunc finibus. Donec et semper quam, et tempus tellus. Nullam quis nisl eu sem sodales consectetur. Donec ornare urna elit, in euismod leo feugiat eget. In eu placerat tellus. Nullam et tristique purus. Sed ut accumsan ipsum, nec semper mauris.</p> 
</div><!--col-lg-4 col-md-4 col-sm-4--> 

<div class="col-lg-4 col-md-4 col-sm-4"> 

<h2>Paragraph 3</h2> 
<p>Mauris euismod massa a gravida posuere. Etiam placerat euismod est. Nam sed scelerisque elit. Mauris id ultrices enim. Nulla eu justo eget tellus vestibulum lacinia non eu augue. Maecenas porta purus vitae vehicula mattis. Nam auctor euismod ornare. Morbi eleifend luctus varius. Sed non nisl porta, vehicula elit sed, rhoncus felis. Aliquam ac elementum nunc. Integer blandit porta nisi, et venenatis nibh. Donec velit lorem, aliquet vel lorem in, efficitur tempus leo. Nulla facilisi. Nam vel malesuada mauris. Vivamus leo libero, finibus ut justo eget, tristique lobortis lectus. Etiam luctus urna eget leo lobortis blandit.</p> 
</div><!--col-lg-4 col-md-4 col-sm-4--> 


</div><!--row--> 
</div><!--container--> 

</body> 
</html> 

나는이 될 것이라고 이유를 알아낼 수 없었다. 어떤 도움을 주시면 감사하겠습니다.

+0

.row 유체가 부트 스트랩 3에 존재하지 않습니다. .container-fluid를 사용할 때 부트 스트랩에 유동적입니다. 또한, col-sm-4 만 필요합니다. 이외에는, 이것은 괜찮아 보이며 col-sm-min-width (768px 이하는이 설정과 겹치지 않습니다) 아래에 스택됩니다. – Christina

+0

제안 된 변경 사항을 적용했지만 여전히 모바일 장치에서 올바르게 에뮬레이션하지 않습니다. 에뮬레이션 할 때 크기가 조절되지 않고 아이폰 4라고 말할 수 있습니다. 단순히 스크롤 막대가 있으며 여전히 3 개의 열이 있습니다. – Solstice

+0

아이폰과 다른 모든 소형 장치에는 문제가 없습니다. 에뮬레이터에 문제가있을 수 있습니다. 현재보고있는 뷰포트에 메타 태그가 포함되어 있습니까? http://jsbin.com/tijen/1/edit – Christina

답변

0

여기에 부트 스트랩 2를 사용하는 것처럼 보입니다.이 tutorial 휴대 기기에서 작동하도록 부트 스트랩 3 구성에 대해 살펴보십시오.

+0

아니요, 2 세부터 사용했던 유일한 것은. 나머지는 부트 스트랩 3이었습니다. – Christina

관련 문제