Question

我试图弄清楚我认为应该相当容易的事情。我有一个基本的Bootstrap布局，如下所示：

    <div class="row">
        <div class="col-md-6" id="tallyForm">
          some content on left side
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <button class="btn btn-default" id="flipForm">Flip Form</button>
            </div>
          </div>
        </div>
        <div class="col-md-6" id="studentImage">
          image loaded here...
        </div>
    </div>

我只想让按钮翻转tallyForm和studentImage divs，从左到右，然后再次点击，它会恢复正常。我的项目中有jquery所以我假设我在按钮上附加了一个click事件，并使用push或pull类做了一些事情。

Answer 1

我只存储了一个div的{{1}}的内容，然后将它们交换掉了。不得不将按钮移到自己的行，否则它也会被移动。

<强> JQuery的

.html()

<强> HTML

$('#flipForm').click(function(){
    var temp = $('#tallyForm').html();
    $('#tallyForm').html($('#studentImage').html());
    $('#studentImage').html(temp);
});

bootply

Answer 2

尽管有重新加载所有html的解决方案，但您可以使用bootstrap方式来推送和拉取列。

只需切换产生效果的类。工作示例：http://www.bootply.com/JzaVGZORKy

$('#flipForm').click(function(e) {
    $('#studentImage').toggleClass('col-md-pull-6')
    $('#tallyForm').toggleClass('col-md-push-6')
})

通过按钮单击在引导程序中翻转列

2 个答案: