问答详情
源自:-

怎么让 按钮弹出list-group呢?

<p class="pull-right visible-xs"></p>  当分辨率小的时候就弹出按钮出来  但是点击按钮的时候没有显示出列表框list-group出来  各位好友求解

提问者:_Sun_ 2016-12-15 14:39

个回答

  • Joker_JOkes
    2017-03-19 00:29:00
    已采纳

    我查看了例子中的源码,有个offcanvas.css和offcanvas.js需要加载。

    offcanvas.css的源码:

    /*

     * Style tweaks

     * --------------------------------------------------

     */

    /*html,

    body {

      overflow-x: hidden;  Prevent scroll on narrow devices 

    }

    body {

      padding-top: 70px;

    }

    footer {

      padding: 30px 0;

    }*/

    /*

     * Off Canvas

     * --------------------------------------------------

     */

    @media screen and (max-width: 767px) {

      .row-offcanvas {

        position: relative;

        -webkit-transition: all .25s ease-out;

             -o-transition: all .25s ease-out;

                transition: all .25s ease-out;

      }

      .row-offcanvas-right {

        right: 0;

      }

      .row-offcanvas-left {

        left: 0;

      }

      .row-offcanvas-right

      .sidebar-offcanvas {

        right: -50%; /* 6 columns */

      }

      .row-offcanvas-left

      .sidebar-offcanvas {

        left: -50%; /* 6 columns */

      }

      .row-offcanvas-right.active {

        right: 50%; /* 6 columns */

      }

      .row-offcanvas-left.active {

        left: 50%; /* 6 columns */

      }

      .sidebar-offcanvas {

        position: absolute;

        top: 0;

        width: 50%; /* 6 columns */

      }

    }


    offcanvas.js的源码:

    $(document).ready(function () {

      $('[data-toggle="offcanvas"]').click(function () {

        $('.row-offcanvas').toggleClass('active')

      });

    });


    在 .html代码中加载这两个文件,样式和行为才能起效。

    贴两个代码片段,你可以根据这个代码片段定位到你的代码,做相应修改:

    这里调用了样式,button调用了data-toggle方法

    <div class="container-fluid">

      <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-sm-9">

          <p class="pull-right visible-xs">

            <button class="btn-xs btn btn-primary" data-toggle="offcanvas">Toggle</button>

          </p>


    下面是list-group需要加载的样式

    <div class="col-sm-3 sidebar-offcanvas" id="sidebar">

          <ul class="list-group">


  • 自始至终J
    2017-01-26 16:25:27

    应该使用data-toggle绑定

  • 自始至终J
    2017-01-26 16:23:51

    会弹。。。前面没点出来

  • 自始至终J
    2017-01-26 16:23:14

    官方这个网站也不会弹出来的,你可以看看


    http://getbootstrap.com/examples/offcanvas/