Question

在图像中，我的内容在桌面和横向版本中都能正常工作，但在纵向模式下却没有（在图像中突出显示）。内容重叠。如何在每个设备屏幕中使内容看起来正常？只会发生当我的描述很长但在其他时候，描述很短，重叠不会发生。所以如何在hte列之间保持恒定的余量？感谢您 ![enter image description here ] 1

代码：

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

Answer 1

您可以使用媒体查询为设备进行正确的响应式设计，并定义设备的宽度检查此链接，它会对您有所帮助Media query

内容重叠在小屏幕Bootstrap

1 个答案: