Question

我正在学习自助教练，而且我正在使用网格系统，因为我正在使用一个包含大量表格的响应式网站。

<div class="row">
    <div class="col-md-1">
        A
    </div>
    <div class="col-md-1">
        B
    </div>
    <div class="col-md-1">
        C
    </div>
</div>
<div class="row">
    <div class="col-md-1">
        D
    </div>
    <div class="col-md-1">
        E
    </div>
    <div class="col-md-1">
        F
    </div>
</div>

我将从这个bootstrap＆＃34; table＆＃34;开始。我想将第一行的div移动到第二行。示例：

<div class="row">
    <div class="col-md-1">
        A
    </div>
    <div class="col-md-1">
        B
    </div>
</div>
<div class="row">
    <div class="col-md-1">
        C
    </div>
    <div class="col-md-1">
        D
    </div>
    <div class="col-md-1">
        E
    </div>
    <div class="col-md-1">
        F
    </div>
</div>

Answer 1

如果我得到你想要的东西，最简单的方法是： 1）检查浏览器的宽度。 2）然后，获取您想要移动的内部元素。 3）将其添加到您想要的位置。 4）然后将它从之前移除。

代码HTML：

<div class="row" id="row1">
    <div class="col-md-1">
        A
    </div>
    <div class="col-md-1">
        B
    </div>
    <div class="col-md-1" id="moveto">

    </div>
</div>
<div class="row" id="row2">
    <h4>--</h4>
    <div class="col-md-1" id="movefrom">
        C
    </div>
    <div class="col-md-1">
        D
    </div>
    <div class="col-md-1">
        E
    </div>
    <div class="col-md-1">
        F
    </div>
</div>

JS代码：

$(document).ready(function() {
     var x = document.getElementById("movefrom").innerHTML  // Get the inner HTML (C in this case)
     if (window.innerWidth <= 768) { // Check the browser's width
           document.getElementById("moveto").innerHTML = x; // Move the element to where you want (moveto id)
           document.getElementById("movefrom").innerHTML = "" // Replace the element by an empty string.
     }
});

这是我发现的最简单的方法。

任何反馈都很棒！

祝你好运

Answer 2

我认为你误解了Bootstrap是如何工作的。它的网格不能通过“将行的div移动到另一行”来工作。会发生什么是网格基于每行12列。如果你想在1行中有3个元素，你可以为每个元素设置col-xx-4（xx是lg，md，sm或xs），因为12/4 = 3.每个元素占用4个12列。

对于您手头的问题 - 您可以将所有6个元素放在同一个row中，并使用lg，md，sm和xs根据屏幕大小调整每个元素的列数。下面是一个例子，我认为你试图手动移动行的div，但这种方式正确地利用了Bootstrap的网格系统。

<div class="container">
    <div class="row">
      <div class="col-sm-4 col-xs-6">
          A
      </div>
      <div class="col-sm-4 col-xs-6">
          B
      </div>
      <div class="col-sm-4 col-xs-6">
          C
      </div>
      <div class="col-sm-4 col-xs-6">
          D
      </div>
      <div class="col-sm-4 col-xs-6">
          E
      </div>
      <div class="col-sm-4 col-xs-6">
          F
      </div>
  </div>
</div>

Here is a Demo JSFiddle

你可以滑动屏幕使其更大/更小，看到2行3折叠到3行2，反之亦然。

Answer 3

回答太晚是我的爱好。

如果您希望它响应调整大小并以两种方式工作，请执行此操作：

window.addEventListener("resize", function(event) {

  //grab what to replace
  var x = document.getElementById("social")
    .innerHTML;

  //for when going to smaller screen 
  if (window.innerWidth <= 560 && !x == "") {
    document.getElementById("social-mobile")
      .innerHTML = x;
    document.getElementById("social")
      .innerHTML = "";
  }


  var y = document.getElementById("social")
    .innerHTML;
  // if we are at bigger screen and node is "", then put it back
  if (window.innerWidth >= 560 && y == "") {
    document.getElementById("social")
      .innerHTML = document.getElementById("social-mobile")
      .innerHTML;
    document.getElementById("social-mobile")
      .innerHTML = "";
  }
});

Answer 4

好吧，我有这个简单的jQuery函数..

(function($){
    $.fn.moveTo = function(selector){
        return this.each(function(){
            var cl = $(this).clone();
            $(cl).prependTo(selector);
            $(this).remove();
        });
    };
});

使用$('.element').moveTo('.element2');，您也可以将其更改为appendTo，或发送参数进行更改。

Bootstrap - 如何将行的div移动到另一行？

4 个答案: