작은 화면에서 내용이 겹치다 부트 스트랩

이미지와 마찬가지로 내 콘텐츠는 세로 모드뿐 아니라 가로 모드에서도 잘 작동합니다 (이미지에 강조 표시되어 있음). 콘텐츠가 겹칩니다. 콘텐츠가 모든 사람에게 정상적으로 보이게하는 방법 장치 화면에? 내 설명이 길지만 설명이 짧으면 오버랩이 발생하지 않는 경우에만 발생합니다. 어떻게 hte 열 사이에 일정한 마진을 유지합니까? 1 작은 화면에서 내용이 겹치다 부트 스트랩

코드 당신 ![enter image description here ] 감사합니다

HTML

<!DOCTYPE html> 

<div class="container"> 
<div class="row"> 

    <div class=" col-lg-6 col-md-12 col-sm-12 form-group"> 
     <a href=""><h2>Dtu Feed</h2> 
     <img src="Images/dtufeed.png" alt="DTU FEED" height="50%" 
width="100%"> 
     <p>Social Network platform designed specially for all DTU 
    students.Containing Dynamically added events by students/society 
    themselves , a map of college ,various groups like book club,a platform 
    for voting on general concerns,a separate profiles for all by signing up 
    through fb,google+ or email and all the extra stuff like notes etc !</p> 
    </a> 

    </div> 

    <div class=" col-lg-6 col-md-12 col-sm-12 form-group"> 
     <a href="http://yat.pythonanywhere.com/"><h2>Blog</h2> 
     <img src="Images/blog.png" alt="BLOG" height="50%" width="100%"> 
      <p>Created a blog website with features of creating and logging in 
    a profile,posting and commenting !</p></a> 

    </div> 

    <div class=" col-lg-6 col-md-12 col-sm-12 form-group"> 

     <a href="Todo/index.html"><h2>To Do List</h2> 
     <img src="Images/todo.png" alt="To do list" height="50%" 
width="100%"> 
     <p>General to-do list with animations upon hovering deleting and 
    adding!</p></a> 
    </div> 

    <div class=" col-lg-6 col-md-12 col-sm-12 form-group"> 
     <a href="PlayTap/circles.html"><h2>PlayTap</h2> 
     <img src="Images/playtap.png" alt="PlayTap" height="50%" 
    width="100%"> 
     <p>Press Keyboard keys to create animaions and sounds !</p></a> 

    </div> 
</div> 
</div>

CSS를 사용

body{ 
padding-top: 5%; 
font-family: 'Roboto Slab', serif; 
} 

h2{ 
text-transform: uppercase; 
font-size: 1.2em; 
}

내가 bootstrap4

을 사용하고 있습니다

출처

2017-12-29 Yatin Gupta

미디어 쿼리를 사용해보십시오. –

장치에 대한 적절한 응답 설계 및 장치 너비 정의를 위해 미디어 쿼리를 사용할 수 있습니다.
이 링크를 확인하면 도움이됩니다 Media query

출처

2017-12-29 12:14:16

감사! 위대한 작품 –

작은 화면에서 내용이 겹치다 부트 스트랩

답변

관련 문제