부 풀랩에 오버랩하지 않고 div를 플로팅하는 방법

Question

http://www.bootstrapzero.com/bootstrap-template/google-maps이 템플릿을 사용하여이 항목을 개발했습니다 : http://www.gencat.cat/patronatmontserrat/proves/Carousel_4/itinerari_1.html 화면과 태블릿에서 완벽하게 작동하지만 휴대 전화로 크기가 조정되면 화면이 여전히 분할되어 있기 때문에 상당히 엉망입니다. 두 부분으로 나누어서 편리하지는 않습니다 (내용을 제대로 볼 수는 없습니다). 따라서 텍스트를 떠 다니고지도 뒤에 마치 한 페이지 만있는 것처럼 (그러나 전화 만). 여기

이 코드는 멀리는 지금 :

<div class="container-fluid" id="main"> 
    <div class="row"> 
     <div class="col-xs-6" id="left"> 

      ....all whole text and images... 

     </div> 
     <div class="col-xs-6" id="map"></div> 
    </div> 
</div> 

CSS/

#main, #main>.row { 
    height:100%; 
    text-align: justify; 
} 

#main>.row { 
    overflow-y:scroll; 
} 

#main p { 
    font-family: 'ralewayregular'; 
    font-size: 1.2em; 
    margin-top: 10px; 
} 

#left { 
    height:100%; 
    padding-top: 50px; 
} 

#map { 
    width:49%; 
    height:calc(100% - 0); 
    position:absolute; 
    right:16px; 
    top:0px; 
    bottom:0; 
    overflow:hidden; 
} 

내가 어떻게 할 수 있습니까? 내가 뭔가를하려고 할 때마다 divs는 서로 겹칩니다 !!

Answer 1

Responsive utilities을 사용하면 성능을 향상시킬 수 있습니다. 그런 다음 사용하는 모바일 장치에서 일부 텍스트를 표시 할 경우, 예를 들어

일부 태블릿, 데스크톱, 노트북 내용과 큰 화면의를 표시 할 경우

는

<p class="visible-sm visible-md visible-lg"> some text</p> 

를 사용

<p class="visible-xs"> some text</p> 

위의 참조를 사용하면 필요에 따라 CSS를 수정/수정할 수 있습니다.

희망 ...