引导程序4：阻止向右移动的列使用最小宽度为1200px的浮点数将另一列向下推

问题描述

在其他地方可能已经回答了这个问题，但是我看了很多其他文章，除了以下内容，我看不到直接相关的答案：

Bootstrap: move div from one column to another,order counts for mobile devices

这确实很有帮助，但是它对我没有用，我不确定我在做什么不同的事情。

基本上，我已经做到了要使列向右移动的目的（使用使列“向右浮动”的媒体查询），并采用了“移动优先”的方法来实现此目的。但是，问题在于它（绿色“技能”列）迫使我的另一列（红色“角色机会”列）在“ lg”视图中向下移动，我希望它占据当前正在创建的空间（黄色的空白区域）。

如果您查看下面的代码段，您会发现它在移动视图中按我希望它们的顺序堆叠它们的工作非常出色，但是随后创建了一个空格（黄色部分）在“ lg”视图中时，我希望红色部分位于灰色（bg-secondary）和绿松石（bg-info）部分的正下方，而不管绿色部分有多大。

请提供帮助，让我知道是否有更多信息可提供，以进一步澄清。

预先感谢

（我总是更新我的答案，以显示在给回复者投票和回答标记后如何实现我的代码）

@media (min-width:1200px) {
  .pull-lg-right {
    float: right;
  }
}

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"></link>
</head>

<body>
  </br>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-3 offset-lg-1 bg-primary">
        <div>
          <h1>Job Title</h1>
          <h2>Job Category</h2>
        </div>
        <div>
          <h2>Spec Roles</h2>
          <ul>
            <li>Example Spec Role</li>
            <li>Example Spec Role</li>
            <li>Example Spec Role</li>
          </ul>
        </div>
      </div>
      <div class="col-lg-7 bg-light">
        <div class="row">
          <div class="col-lg-12">
            <h2>Job Requirements</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-9 bg-warning">
            <div class="row">
              <div class="col-lg-7 bg-secondary">
                <h2>Qualifications</h2>
                <h3>Apprenticeship</h3>
                <ul>
                  <li>Example Qual</li>
                </ul>
                <h3>Alternative</h3>
                <ul>
                  <li>Example Qual</li>
                  <li>Example Qual</li>
                  <li>Example Qual</li>
                </ul>
              </div>
              <div class="col-lg-5 bg-info">
                <h2>Training</h2>
                <ul>
                  <li>Example Training</li>
                  <li>Example Training</li>
                  <li>Example Training</li>
                  <li>Example Training</li>
                  <li>Example Training</li>
                  <li>Example Training</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-lg-3 pull-lg-right bg-success clearfix">
            <h2>Skills</h2>
            <ul>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
            </ul>
          </div>
          <div class="col-lg-9 bg-danger">
            <div class="row">
              <div class="col-12">
                <h2>In Role Opportunities</h2>
                <h3>Continuous Professional Development</h3>
                <ul>
                  <li>Example CPD</li>
                  <li>Example CPD</li>
                </ul>
                <h3>Personal Development</h3>
                <ul>
                  <li>Example PDO</li>
                  <li>Example PDO</li>
                  <li>Example PDO</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>

</body>

</html>

解决方法

@media (min-width:1200px) {
  .pull-lg-right {
    float: right;
  }
}

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"></link>
</head>

<body>
  </br>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-3 offset-lg-1 bg-primary">
        <div>
          <h1>Job Title</h1>
          <h2>Job Category</h2>
        </div>
        <div>
          <h2>Spec Roles</h2>
          <ul>
            <li>Example Spec Role</li>
            <li>Example Spec Role</li>
            <li>Example Spec Role</li>
          </ul>
        </div>
      </div>
      <div class="col-lg-7 bg-light">
        <div class="row">
          <div class="col-lg-12">
            <h2>Job Requirements</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-9 bg-warning">
            <div class="row">
              <div class="col-lg-7 bg-secondary">
                <h2>Qualifications</h2>
                <h3>Apprenticeship</h3>
                <ul>
                  <li>Example Qual</li>
                </ul>
                <h3>Alternative</h3>
                <ul>
                  <li>Example Qual</li>
                  <li>Example Qual</li>
                  <li>Example Qual</li>
                </ul>
              </div>
              <div class="col-lg-5 bg-info">
                <h2>Training</h2>
                <ul>
                  <li>Example Training</li>
                  <li>Example Training</li>
                  <li>Example Training</li>
                  <li>Example Training</li>
                  <li>Example Training</li>
                  <li>Example Training</li>
                </ul>
              </div>

          <div class="col-lg-12 bg-danger">
            <div class="row">
              <div class="col-12">
                <h2>In Role Opportunities</h2>
                <h3>Continuous Professional Development</h3>
                <ul>
                  <li>Example CPD</li>
                  <li>Example CPD</li>
                </ul>
                <h3>Personal Development</h3>
                <ul>
                  <li>Example PDO</li>
                  <li>Example PDO</li>
                  <li>Example PDO</li>
                </ul>
              </div>
            </div>
          </div>
            </div>
          </div>
          <div class="col-lg-3 pull-lg-right bg-success clearfix">
            <h2>Skills</h2>
            <ul>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
              <li>Example Skill</li>
            </ul>
          </div>

        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>

</body>

</html>

bootstrap-4 col floating html

引导程序4：阻止向右移动的列使用最小宽度为1200px的浮点数将另一列向下推

问题描述

解决方法

相关问答