html - 他们不根据屏幕大小调整行和列类
问题描述
我正在尝试根据屏幕大小在 row & col 类中移动 div,但我的 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 来决定块的大小。这将导致该组件没有响应。这是一个可能的解决方案:
/* 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,因此请充分利用它。偏移列可以以更好的响应方式帮助处理“左”属性。阅读文档的这一部分:
快乐编码!
推荐阅读
- javascript - react/redux 应用程序中的 js 承诺中未捕获的错误
- python - 什么 setup.py 命令将更新站点包中的源?
- reactjs - 如何在 TextEditor 中获取当前输入文本并在 Draftjs 中自动完成,如提及或主题标签
- python - 结合 Astropy FITS 文件?
- regex - 在 Regex Ruby 中捕获 >= 10 的第一个十进制数
- excel - VBA 用于条件格式以格式化具有不同值的多行?
- json - 将 json 字符串转换为对象列表的通用方法
- c# - 当 UnitTest 调用该方法时,Moq 设置返回空对象
- azure - 在 Azure Powershell Runbook 中使用“invoke-webrequest”时清空“Parsed-HTML”字段
- three.js - Stereoeffect.js 不工作。它显示黑屏