为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

正在回答

4 回答

我查看了例子中的源码,有个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">


0 回复 有任何疑惑可以回复我~
#1

_Sun_ 提问者

非常感谢!
2017-04-19 回复 有任何疑惑可以回复我~

应该使用data-toggle绑定

0 回复 有任何疑惑可以回复我~

会弹。。。前面没点出来

0 回复 有任何疑惑可以回复我~

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


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

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信