我有一个酒吧在我的页面顶部，它应该基本上占据了整个页面，在桌面上看起来很好，但我也希望它在手机上看起来很好。
这里有一个问题的例子
这才是关键
<div class="jumbotron text-center" id = "top_bar">
<img class="rounded-circle shadow-4-strong" alt="avatar" src="{% static 'avatar2.png' %}" style="width:100px; height:100px; border-radius: 50%;" />
</div>关于CSS
#top_bar{
border-radius: 0px 0px 25px 25px;
background-color:#696969;
width:100%;
}如果你谷歌这个问题，你会发现人们说把这个放在你的头上应该神奇地解决一切
<meta name="viewport" content="width=device-width, initial-scale=1">不会的
我该怎么解决这个问题呢？我希望div在桌面和手机上都能延伸到屏幕的宽度。
更新，这里有一堆的html，下面的一切都是无关紧要的
<!DOCTYPE html>
<html lang="en" dir="ltr">
{% load static %}
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.card-img-top{
width: 100px;
height: 100px;
position: absolute;
border-radius: 25px;
left: 50%;
top:60px;
transform: translate(-50%, -50%);
}
.card{
background-color:#f5eeee;
width: 36rem;
height: 30rem;
border-radius: 25px;
padding: 20px;
position: relative;
}
.card-body{
position: absolute;
top:130px;
}
.card-text{
text-align: left;
}
a {
color: black;
text-decoration: none !important;
}
.quick_skill{
float: left;
width: 150px;
height: 50px;
}
.quick_skill_img{
width: 36px;
height: 30px;
}
body {
background-color:#424743;
color:white;
}
#top_bar{
border-radius: 0px 0px 25px 25px;
background-color:#696969;
width:100%;
}
#intro {
text-align: center;
margin-left:21%;
margin-right:200px;
width:55%;
}
#right_box{
left:23%;
}
#left_box{
left:10%;
}
</style>
</head>
<body>
<div class="jumbotron text-center" id = "top_bar">
<img class="rounded-circle shadow-4-strong" alt="avatar" src="{% static 'avatar2.png' %}" style="width:100px; height:100px; border-radius: 50%;" />
</div>
<br>
<!-- <div style = "text-align: center; margin-left:35rem;margin-right:200px; width:80rem;"> -->
<div id = "intro">
Welcome to my portfolio website! My name is Jack Flavell, and I am excited to share my work with you. This website serves as a showcase of my professional
and personal projects, as well as a way for you to get to know me better. As you browse through my portfolio, I hope you'll gain insight into my skills,
passions, and experiences. Thank you for taking the time to visit my website, and please don't hesitate to reach out if you have any questions or feedback.
</div>
<br><br>
<div class="container">
<div class="row">
<div class="col-sm-4" id="left_box">
<a href="{% url 'personal_projects' %}">
<div class="card">
<img class="card-img-top" src="{% static 'n_personal_stuff.png' %}" alt="personal projects images">
<div class="card-body">
<h4 class="card-title">Personal projects</h4>
<p class="card-text">Projects ive worked on in my personal time. Either for fun, out of interest or for self improvement. </p>
</div>
</div>
</a>
</div>
<div class="col-sm-4" id="right_box">
<a href="{% url 'professional_projects' %}">
<div class="card">
<img class="card-img-top" src="{% static 'proffesional_stuff2.png' %}" alt="professional experience">
<div class="card-body">
<h4 class="card-title">Proffesional projects</h4>
<p class="card-text">Some things ive done in a proffesional capacity.</p>
</div>
</div>
</a>
</div>
</div>
1条答案
按热度按时间vzgqcmou1#
因为你在使用
所以在1920 px（示例）中，您没有看到任何错误，但在较低的宽度（如800 px）中，您的col-sm-4将超出html
你可以使用
或使用