时间戳

首页 > 解决方案 > 将 img 移动到断点上的不同引导 col

javascript - 将 img 移动到断点上的不同引导 col

问题描述

使用 Bootstrap 4，我有一个<container>有两列的。

在属于boostrap 4 个断点 md-xl的屏幕尺寸上，它们排列在两个大小相等的列中： ，并在sm-xs屏幕col-md-6上堆叠成一列： 。col-xs-12

我想在md屏幕上将蓝色移动到红色img上方img（所以从一个col到另一个 - 见下图）。我玩过一些 javascript 和Node.insertBefore()，但如果可能的话，我更愿意使用 Bootsrap4 CSS 来做到这一点。

在此处输入图像描述

下面是我使用一些补救性 javascript 进行的第一次尝试 - 有人能指出我正确的方向吗？

function movelogo() {
    var logo = document.getElementById('logo');
    logo.insertBefore(logo, 'next_col');
}


window.addEventListener('resize', movelogo);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
    <meta http-equiv="content-type" content="text/html"/>
    <title>Title</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
          integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body>

<div id="about" class="container">
    <h1 class="text-center display-3 mb-4">About</h1>
    <div class="row justify-content-center">

        <div class="col-xs-12 col-md-6">

            <img src="https://via.placeholder.com/300/0000FF/808080?text=Logo" class="img-fluid mb-5 mx-auto d-block"
                 id="logo" alt="Logo">

            <p>Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione
                stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed
                timore populationum et caedium, milite per omnia diffuso propinqua, magnis undique praesidiis
                conmunitam.</p>

            <p> Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut
                vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare
                possit, non admodum delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum
                officiorumque iucundius.</p>
        </div>

        <div class="col-xs-12 col-md-6" id="next_col">
            <img src="https://via.placeholder.com/400x600/FF0000/FFFFFF?text=Image" alt="Main image"
                 class="mx-auto d-block img-fluid">
        </div>
    </div>
</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
</body>
</html>

标签： javascripthtmlcsstwitter-bootstrapfunction

解决方案

这是一种在简单的 JS 中使用带有 JavaScript 的媒体查询而不更改 HTML 的方法，只需id="current_col"在徽标 div 中添加一个即可。

（我sm-6在下面的snipper bellow中放了一个让你直接在这里看到结果）

function resize(x) {
  if (x.matches) { // If media query matches
    document.getElementById('next_col').prepend(
      document.getElementById('logo')
    );
  } else {
    if ($("#next_col").children("#logo").length > 0) {
      document.getElementById('current_col').prepend(
        document.getElementById('logo')
      );
    }
  }
}

var x = window.matchMedia("(max-width: 960px)")
resize(x) // Call listener function at run time
x.addListener(resize) // Attach listener function on state changes
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
  <meta http-equiv="content-type" content="text/html" />
  <title>Title</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!-- Font Awesome CSS -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link rel="stylesheet" type="text/css" href="css/main.css">

</head>

<body>

  <div id="about" class="container">
    <h1 class="text-center display-3 mb-4">About</h1>
    <div class="row justify-content-center">

      <div class="col-xs-12 col-sm-6" id="current_col">

        <img src="https://via.placeholder.com/300/0000FF/808080?text=Logo" class="img-fluid mb-5 mx-auto d-block" id="logo" alt="Logo">

        <p>Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite
          per omnia diffuso propinqua, magnis undique praesidiis conmunitam.
        </p>

        <p> Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum delectari? Nihil est enim
          remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque iucundius.</p>
      </div>

      <div class="col-xs-12 col-sm-6" id="next_col">
        <img src="https://via.placeholder.com/400x600/FF0000/FFFFFF?text=Image" alt="Main image" class="mx-auto d-block img-fluid">
      </div>
    </div>
  </div>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

你可以在这里测试它： https ://jsfiddle.net/748sormv/

推荐阅读