Question

我正在尝试实现滑动菜单。我正在使用bootstrap 3网格系统。如何使用bootstrap的网格系统将元素从一侧移动到另一侧？如果没有网格系统，我会简单地定位我的元素然后更改left属性，如this Plunker中所示，但我觉得这个解决方案是不正确的。有什么帮助吗？

HTML：

<button id="clickMe">Click me</button>
<div>Hello Plunker!</div>

CSS：

div {
  width: 200px;
  height: 100px;
  background-color: green;
  position:absolute;
  left:0;
  right:auto;
  transition: all 0.5s linear;
}


div.left {
  left:0;
}

div.left {
  left:200px;
}

JS：

  var el = document.getElementById('clickMe')
  el.addEventListener('click', function(e) {
    var element = document.querySelector('div');
    if (element.classList.contains('left') {
      element.classList.remove('left');
      element.classList.add('right');
    } else {
      element.classList.remove('right');
      element.classList.add('left');
    }
  })

如何使用bootstrap 3网格系统滑动元素

0 个答案: