我正在尝试根据屏幕尺寸将 div 移动到 row & col 类中,但我的 div 只是保持固定并且不会调整。即使我没有对行内的 div 进行任何定位,它也应该移动。我的其他页面工作正常,但我不能让它工作。
为什么会这样?
我的代码:
.my-posted-jobs {
position: relative;
margin-top: 101px;
width: 44em;
left: 11em;
display: inline-block;
}
h1.my-posted-jobs-title {
margin-left: 46px;
margin-bottom: 10px;
}
.my-jobs-section {
list-style-type: none;
list-style-position: outside;
margin-left: auto;
margin-right: auto;
}
.separate-job {
padding: 15px;
margin: 9px;
-webkit-box-shadow: 0px 0px 23px -5px rgba(21, 89, 211, 0.54);
box-shadow: 0px 0px 23px -5px rgba(21, 89, 211, 0.54);
height: 13em;
-webkit-animation: appear 1s ease 0s 1 normal;
-moz-animation: appear 1s ease 0s 1 normal;
-ms-animation: appear 1s ease 0s 1 normal;
animation: appear 1s ease 0s 1 normal;
position: relative;
}
.pictures-li {
width: 75px;
height: 75px;
display: flex;
right: 6em;
position: absolute;
}
.job-date-li {
margin-top: 5em;
display: inline-block;
font-weight: bold;
opacity: 0.7;
font-size: small;
}
<section class="my-posted-jobs">
<div class="row">
<div class="col-md-12">
<h1 class="my-posted-jobs-title">@ViewBag.myJobsTitle</h1>
<div class="border-job"></div>
<ul class="my-jobs-section">
<li class="separate-job">
<div class="content-li">
<h2 class="content-li--headline"></h2>
<div class="pictures-li">
<img class="posted-pic" ..>
</div>
<div class="job-date-li">
here is some date.
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
最佳答案
我立即注意到了几件事。现在,您正在使用硬编码的 EM 来决定 block 的大小。这将导致该组件无法响应。这是一个可能的解决方案:
/* Setting a max-width of 44em while keeping the width as 100% makes it responsive. Remove the LEFT, which causes the section to offset at a fixed 11em. */
.my-posted-jobs {
position: relative;
margin-top: 101px;
display: inline-block;
width: 100%;
max-width: 44em;
}
由于您使用的是 Bootstrap 3,请充分利用它。偏移列可以以更好的响应方式帮助“左”属性。阅读文档的这一部分:
Offset Columns Documentation - Bootstrap 3
编码愉快!
关于html - Row & col class 他们不根据屏幕大小调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55983063/