Question

默认情况下，我的页面上有3个元素，如下所示：

___________________________
|  Element  | Element 2 |
|      1    | Element 3 |
---------------------------

我需要的是单击事件，将元素2更改为具有全宽的顶部，同时将元素1和元素3保持在一起，如下所示：

___________________________
|      Element 2         |
| Element  |   Element 3 |
|    1     |             |
---------------------------

还包括一些有助于可视化的屏幕截图：

元素布局-默认

元素布局-过渡后

我尝试使用push和pull bootstrap类，除了在元素1下总是将第3个元素强制插入到新行之外，该类均起作用，我还看到了其他示例，其中它们在元素2和3中使用默认布局自己的行，但是将其更改为全宽时，如果不进行大量操作就无法正常工作。

这是我当前的标记：

<div class="row">
    <div class="col-md-4 col-md-push-8">
        <div>Element 2</div>
        <div>Element 3</div>
    </div>
    <div class="col-md-8 col-md-pull-4">
        <div>Element 1</div>
    </div>
</div>

我也尝试过将元素3移动到其自己的列中，但是它总是以元素1的形式结束于元素1下方，就像我这样做时一样：

<div class="row">
    <div class="col-md-4 col-md-push-8">
        <div>Element 2</div>
    </div>
    <div class="col-md-8 col-md-pull-4">
        <div>Element 1</div>
    </div>
    <div class="col-md-4 col-md-push-8">
        <div>Element 3</div>
    </div>
</div>

Answer 1

如何预定义第一行并将宽度设置为12。

在jquery中，您可以将click元素添加到每个元素，然后在单击时将它们附加到顶部div。您还可以遍历页面加载时的click元素，以确定/设置一个data属性，如果已经在第一行中再次单击，则可以将其移回其原始位置。

https://jsfiddle.net/eobxja1k/5/

HTML设置：

<div class="row" id="myContainer">
  <div class="col-8 offset-3" id="topRow"></div>
  <div class="col-4" id="bottomRow1">
    <div class="clickMe">Element 2</div>
        <div class="clickMe">Element 3</div>
    </div>
    <div class="col-8" id="bottomRow2">
        <div class="clickMe">Element 1</div>
    </div>
</div>

JQUERY：

$(document ).ready(function() {
    $('.clickMe').each(function() {
      $(this).attr('data-original', $(this).parent().attr('id'));
    });
});

$('.clickMe').click(function(){
  if($(this).parent().attr('id') != 'topRow'){
    $(this).appendTo('#topRow');
  } else {
    $(this).appendTo('#' + $(this).data('original'));
  }
});

Css：

#topRow {
  color: white;
  color: black;
}

#bottomRow1 {
  background: blue;
  color: white;
  min-height: 25px;
}

#bottomRow2 {
  background: green;
  color: white;
  min-height: 25px;
}

Answer 2

如果您愿意使用新的CSS Grid系统，则可以相对轻松地做到这一点。此解决方案使用UIImageView属性定义名为lame，grid-template-areas和one的区域。然后在单击时，将一个类添加到容器元素，该类将这三个区域中的每一个重新排列为您指定的“转换后”布局。

two

three

$('html').click(function(){
 $('.container').toggleClass('two-on-top');
})

要了解此处发生的情况，请查看：https://css-tricks.com/snippets/css/complete-guide-grid/

和

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

Bootstrap 3移动列以扩展行，并将其下方的列与下一列嵌套

2 个答案: