Question

我有两列的自举行，左边应该是页面特定的导航/项目，也应该在md和更高的设备上始终可见，并且应该在较小的设备上显示切换按钮以切换左列。

以下是显示的当前jsfiddle工作代码，并手动隐藏左列。

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Examples for bootstrap-slider plugin">
    <meta name="author" content="">

      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
      <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  </head>

  <body>

<style>
.row-fluid div {
    -webkit-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    -moz-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    -o-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}

.row-fluid .col-0 {
    width: 0%;
    float:left;
    overflow:hidden;
}

#col1 {
    background-color: #A6BFBA;
}

#col2 {
    background-color: #DE4124;
}

#trig {
    margin: 50px;
}

.row-fluid .col-0 + [class*="col"]{
    margin-left: 0;
}
</style>

<div class="container-fluid">
    <div class="row-fluid">

        <div id="col1" class="col-xs-3">
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
            Left Column text here<br/>
        </div>

        <div id="col2" class="col-xs-9">
            <a id="trig" class="btn btn-primary">Toggle Nav</a><br/>
            Right Column text here<br/>
            Right Column text here<br/>
            Right Column text here<br/>
        </div>

  </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('#trig').on('click', function () {
        $('#col1').toggleClass('col-0 col-xs-3');
        $('#col2').toggleClass('col-xs-12 col-xs-9');
    });
});
</script>

  </body>
</html>

Bootstrap仅在小型设备上显示左列和切换按钮

0 个答案: