Html 小屏幕引导中的内容重叠_Html_Css_Twitter Bootstrap_Frontend

Html 小屏幕引导中的内容重叠

html css twitter-bootstrap

Html 小屏幕引导中的内容重叠,html,css,twitter-bootstrap,frontend,Html,Css,Twitter Bootstrap,Frontend,正如在图片中一样，我的内容在桌面版和横向版都可以正常工作，但在纵向模式下不能正常工作（在图片中突出显示）。内容是重叠的。如何使内容在每个设备屏幕上看起来正常？只有当我的描述很长时才会发生这种情况，但在其他情况下，当描述很短时不会发生重叠。那么，我如何在列之间保持恒定的边距？[谢谢你] 代码： HTML 我正在使用bootstrap4您可以使用媒体查询为设备进行正确的响应设计，并定义设备的宽度。检查此链接，它将帮助您尝试使用媒体查询。谢谢！效果很好 <!DOCTYPE html>

正如在图片中一样，我的内容在桌面版和横向版都可以正常工作，但在纵向模式下不能正常工作（在图片中突出显示）。内容是重叠的。如何使内容在每个设备屏幕上看起来正常？只有当我的描述很长时才会发生这种情况，但在其他情况下，当描述很短时不会发生重叠。那么，我如何在列之间保持恒定的边距？[谢谢你]

代码：

HTML

我正在使用bootstrap4

您可以使用媒体查询为设备进行正确的响应设计，并定义设备的宽度。

检查此链接，它将帮助您尝试使用媒体查询。谢谢！效果很好

<!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>

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

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