Question

我一直在试图在div标签内交换Bootstrap类属性。我想充分利用Bootstrap 12列网格，但是将12列切换成一列9列和3列布局。这是一个例子：

这是JDFIDDLE DEMO。这个示例代码：

<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div id="LeftColumn" class="col-md-9 col-sm-9 col-xs-12">
    <h3>Left Column</h3>
    <p>Currently is set to col-md-9, but it should initially be col-md-12 and be toggled to col-md-9 while maintining the its responsive properties.</p>
    <p><span class="strong">DESIRED RESULT:</span>Toggle the properties &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt; to &lt;div class="col-md-9 col-sm-9 col-xs-12"&gt; when the "Toggle Right" column button is clicked while maintaining the existing functionality.</p>
    </p>
    <div id="Bar" class="main-container collapse in">
      <a href="#Foo" class="btn btn-success" data-toggle="collapse">Toggle Right</a>
    </div>
    <div class="clearfix"></div>
    <br />
  </div>
  <div id="RightColumn" class="col-md-3 col-sm-3 col-xs-12">
    <div id="Foo" class="main-container collapse" style="border: dotted 1px green;">
  Toggle Left Column <a href="#Bar" class="btn btn-warning" data-toggle="collapse"><i class="fa fa-bars"></i></a>Additional content will be displayed in this column once triggered.
      <div style="height: 150px;"></div>
    </div>
  </div>
</div>

我需要在现有按钮“Toggle Right”和“Toggle Left”按钮中保持切换功能。

我非常感谢一些帮助到RightColumn和LeftColumn中的类分别从12（col-md-12）到9（col-md-9）和3（col-md-3）切换。

Answer 1

您可以使用Js / Jquery来执行此操作。假设最初你的左栏设置为col-md-12，我已经更新了你的代码以切换右键。单击切换按钮，您可以添加或删除任何您喜欢的类。现在更新的代码如下 `

<div class="container-fluid col-lg-12 border-red">
<div class="col-lg-12 align-center"><h3>Sample Table</h3></div>
  <div class="col-md-12 col-sm-12 border-black align-center">
  Right Column Full 12 Columns (col-md-12) before triggering Toggle button.
  </div>
  <div class="clearfix"></div>
  <div class="col-md-9 col-sm-9 col-xs-12 border-green">Main Container (col-md-9) after toggle button is clicked should still maintain its responsiveness properties.<br /></div>
  <div class="col-md-3 col-sm-3 col-xs-12 border-blue">Toggle Right Column<br />(col-md-3)</div>
</div>

<hr />

<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div id="LeftColumn" class="col-md-12 col-sm-12 col-xs-12">
        <h3>Left Column</h3>
        <p>Currently is set to col-md-9, but it should initially be col-md-12 and be toggled to col-md-9 while maintining the its responsive properties.</p>
        <p><span class="strong">DESIRED RESULT:</span>Toggle the properties &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt; to &lt;div class="col-md-9 col-sm-9 col-xs-12"&gt; when the "Toggle Right" column button is clicked while maintaining the existing functionality.</p>

        <div id="Bar" class="main-container collapse in">
          <a href="#Foo" class="btn btn-success" data-toggle="collapse" id ="toggle-right">Toggle Right</a>
        </div>
        <div class="clearfix"></div>
        <br />
      </div>
      <div id="RightColumn" class="col-md-3 col-sm-3 col-xs-12">
        <div id="Foo" class="main-container collapse" style="border: dotted 1px green;">
      Toggle Left Column <a href="#Bar" class="btn btn-warning" data-toggle="collapse"><i class="fa fa-bars"></i></a>Additional content will be displayed in this column once triggered.
          <div style="height: 150px;"></div>
        </div>
      </div>
    </div>`

更新js代码位于

之下

    $(".main-container.collapse").on('shown.bs.collapse', function() {
  //when a collapsed div is shown hide all other collapsible divs that are visible
  $(".main-container.collapse").not($(this)).collapse('hide');
});
$('#toggle-right').click(function(e) {
var left = $('#LeftColumn');
if(left.hasClass('col-md-9'))
{
left.removeClass("col-md-9 col-sm-9").addClass("col-sm-12 col-md-12");
}
else
{
left.removeClass("col-md-12 col-sm-12").addClass("col-sm-9 col-md-9");
}
})

您更新的JsFiddle是here。现在基于此，您还可以添加左侧切换按钮。

Answer 2

如果我正确理解您的问题，您希望能够通过点击按钮在特定div class="col-md-9 col-sm-9 col-xs-12"和$("#button-id").click(function(){ if ($("#div-to-change").hasClass("col-md-12")) { $("#div-to-change").removeClass("col-md-12 col-sm-12").addClass("col-md-9 col-sm-9"); } else { $("#div-to-change").removeClass("col-md-9 col-sm-9").addClass("col-md-12 col-sm-12"); } });之间切换？

要做到这一点，你可以使用jQuery做这样的事情：

{{1}}

在DIV标记内切换Bootstrap列属性

2 个答案: