5

使用 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>

4

3 回答 3

1

这是一种在简单的 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/

于 2018-12-18T09:39:03.710 回答
0

有几个问题...

  • next_col是字符串而不是节点。

  • usinglogo.insertBefore(logo, 'next_col');正在尝试将其插入其logo自身，在此之前next_colOFC 在徽标中不存在。

“下面的代码尝试在任何屏幕尺寸上移动徽标（稍后我会担心检测屏幕尺寸）。”

这意味着每次触发窗口调整大小事件时，它都会尝试 insertBefore，这很可能会使浏览器崩溃。您需要一些测试条件，并解决其他问题....

function movelogo() {
    var logo = document.getElementById('logo');
    var next_col = document.getElementById('next_col');
    if (logo.parentNode !== next_col) {
        next_col.insertBefore(logo, next_col.childNodes[0]);
    }
}

https://www.codeply.com/go/G8zYKzmnZf

但是，真的没有理由使用 JS，因为 Bootstrap 是响应式的，可以用来改变 xs 和 sm 屏幕宽度的布局：https ://www.codeply.com/go/rh6PfIucow

于 2018-12-12T13:34:18.303 回答
0

这是一个解决方案；您必须查看它的全尺寸，然后将窗口大小调整到 480 像素以下才能看到结果。我包含了一个媒体查询来解决您的问题。我还在您的 HTML 中创建了两个新的包含 divbluecol和redcol.

bluecoldiv 围绕蓝色图像和它的文本。在float:left媒体查询中用于文本 div 以在调整大小时将其与左侧对齐。最初我将文本 div 放在代码中的图像之后，但随后文本首先显示在更大的屏幕上。我删除了一些内联引导 css 并添加了一些新创建的（短）自定义类来实现最终结果。

希望这是有帮助的。

h1 {
  text-align: center;
  padding: 10px;
}

#abouttxt {
  font-weight: normal;
  font-size: 10pt;
  line-height:1.4em;
  margin-top:12px;
  
}

#logo {
  width: 60%;
  margin: 0 20%;
}

#abouttxt,
#logo {
  display: inline-block;
}


.red {
  width: 80%;
  margin: 0 10%;
}

#bluecol,
#redcol {
  display: block;
}

@media only screen and (min-width:480px) {
  #abouttxt {
    max-width: 50%;
    font-weight: normal;
    font-size: 10pt;
    float: left;
  }
  #logo {
    max-width: 40%;
    margin: 5px 10px;
  }
  #abouttxt,
  #logo {
    display: inline-block;
    vertical-align: top;
  }
  .red {
    width: 40%;
    margin-left: 52%;
  }
  #bluecol,
  #redcol {
    display: inline-block;
  }
}
<!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 id="bluecol" class="col-xs-12 col-md-6">

        <img id="logo" alt="Logo" src="https://via.placeholder.com/300/0000FF/808080?text=Logo" />
        <section id="abouttxt">
          <p class="btext">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 class="btext"> 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>
        </section>


      </div>

      <div id="redcol" class="col-xs-12 col-md-6">
        <img class="red" class="mx-auto" src="https://via.placeholder.com/400x600/FF0000/FFFFFF?text=Image" alt="Main image">
      </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>

于 2018-12-17T19:02:04.547 回答