Toggle DIV 标记内的引导列属性

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>

我需要保持现有按钮“向右切换”和“向左切换”按钮中已有的切换功能。

我非常感谢您对 RightColumn 和 LeftColumn 中的类分别从 12 (col-md-12) 切换到 9 (col-md-9) 和 3 (col-md-3) 的帮助。

Answer 1

您可以使用 Js/Jquery 来做到这一点。假设最初您的左列设置为 col-md-12，我已经更新了您的切换右键的代码。 Onclick 切换按钮，您可以添加或删除任何您喜欢的类。更新后的代码如下。
`

<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

如果我正确理解您的问题，您希望能够通过单击按钮在 class="col-md-12 col-sm-12 col-xs-12" 和 class="col-md-9 col-sm-9 col-xs-12" 的特定 div 之间切换？

为此，您可以使用 jQuery 执行以下操作：

$("#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");
  }
});