Row & col 类，它们不会根据屏幕大小进行调整

Posted 2023-03-06

【中文标题】Row & col 类，它们不会根据屏幕大小进行调整

【英文标题】：Row & col class they dont adjust acording to the screen size

【发布时间】：2019-09-22 18:47:09

【问题描述】：

我正在尝试根据屏幕大小在 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>

【参考方案1】：

我一开始就注意到了几件事。现在，您正在使用硬编码的 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，因此请充分利用它。偏移列可以以更好的响应方式帮助处理“左”属性。阅读这部分文档：

Offset Columns Documentation - Bootstrap 3

编码愉快！