如图所示，我的内容在桌面版和横向版中都运行良好，但在纵向模式下(在图像中突出显示)。内容重叠。如何使内容在每个设备屏幕上看起来正常？它只会发生当我的描述很长但在其他情况下当描述很短时重叠不会发生。那么我如何保持 hte 列之间的恒定边距？谢谢
] 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
最佳答案
您可以使用媒体查询为设备进行适当的响应式设计并定义设备的宽度。
检查此链接它会帮助你 Media query
关于html - 小屏幕 Bootstrap 中的内容重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48022373/