使用Bootstrap 3.0 griding时，使用css从上到下切换元素位置

Question

我正在使用Bootstrap 3.0及其网格系统，并且在我的页面上有两个div，一个在另一个之上。

我希望让用户能够切换视图，以便这些div一个 一边 另一个（点击一个按钮）。我可以只使用CSS3吗？

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-8 col-md-offset-2">
           <div class="alert alert-info">
               <!-- first div content-->
           </div>
           <div class="alert alert-info">
               <!-- second div content-->
           </div>
       </div>
   </div>
</div>

Answer 1

您可以使用输入复选框作为控制状态，并将标签设为按钮。复选框必须放在代码之前。 在HTML中：

<input type="checkbox" id="checkbox">
<label for="checkbox">It's button</label>
<div class="your_div">Your div</div>

然后你有两块CSS：

#checkbox{ %unchecked state% }
#checkbox ~ .your_div{ %unchecked state% }

和

#checkbox:checked{ %checked state% }
#checkbox:checked ~ .your_div{ %checked state% }

前段时间我测试了这个技巧，它完美无缺。