html - 使用 Bootstrap 3.0 grinding 时用 css 从上方切换元素位置到一侧

Question

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

我想让用户能够切换 View ，这样这些 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 block :

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

和

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

前段时间我测试了这个技巧http://codepen.io/KZee/pen/JdZeqv它工作完美。