请教BS是如何根据屏幕尺寸自动添加或删除一些css类，以达到自适应的目的的？
如题，我想在项目的某个页面里做一些自适应的效果，如屏幕宽度大于768时，
<div class="col-md-5"></div>，
但是在移动端，宽度小于768时，我想自动把这个div改成 <div class="sm-div"></div>
sm-div是我自定义的一个css类
请教该如何做到。我看到很多bs组件都是用类似的方法做到的。
<div class="col-md-5"></div>，
但是在移动端，宽度小于768时，我想自动把这个div改成 <div class="sm-div"></div>
sm-div是我自定义的一个css类
请教该如何做到。我看到很多bs组件都是用类似的方法做到的。
10 个回复
rew1011
赞同来自:
rew1011
赞同来自:
@media (max-width: 768px) { 把你sm-div的代码扔进来 }Rirai
赞同来自:
我想动态修改div的类。
rew1011
赞同来自:
rew1011
赞同来自:
Rirai
赞同来自:
Rirai
赞同来自:
找了一些资料，才发现bootstrap好像用了统一的插件media query来做自适应的。（可能有误，好像某些地方提到了，我没有深入的看代码）
最终我用了触发消息貌似解决了问题（还没有最终确定）：大概的方法是
$("#myScrollspy").on('hidden.bs.offcanvas',function(){
$("#divId").css("xxxxxxxxx");
console.log("menu is hide");
});
rew1011
赞同来自:
它很像监听，达到某个条件了，就去执行相应的css。
你这代码不就是隐藏了菜单的时候去改变了css样式么?
rew1011
赞同来自:
之前你说屏幕发生变化时去改变css，那么我就告诉了你媒体查询即可，可你非要动态的调用class，那么只能js。
现在又说发现bootstrap用了统一的插件media query，大哥，这不就是媒体查询吗？还有你那代码的监听事件，和你描述的问题完全是两回事儿啊，完全搞不懂你在说什么了。
Rirai
赞同来自:
设计需求是这个样子滴：
电脑屏幕上使用 affix+nav导航(大致效果如下图)
手机屏幕上（nav导航隐藏）在右侧出现一个navbar-toggle的按钮，点击这个按钮，则在左侧把上述的nav导航以侧栏的方式显示。(大致效果如下图)
其他的一些要求就是滚动监听之类的。
在bootstrap库里和网上都没有找到十分合意的组件
所以只好手工拼接了一个。
bootstrap自带的affix+nav导航，不变，照抄教程就搞定了。
navbar-toggle也搞定了，关键和侧栏的关系一直搞不好（用了第三方的Bootstrap Offcanvas），
因为描画部分没有用Bootstrap Offcanvas，用了自己上述的nav导航，所以需要动态的用css来美化，和一些附加操作。
现在大体搞定了，方法是
1，用了offcanvas提供的触发消息，进行css修改，如
$("#myScrollspy").on('hidden.bs.offcanvas',function(){
$("#divId").css("xxxxxxxxx");
console.log("menu is hide");
});
2，看懂了一部分offcanvas的代码，直接在底层上修改了一些代码，才最终搞定。
关键自己写组件的水平不够，说不定自己从头写一个不太通用的组件也不是很难。
（说不定比看懂他人代码，改造要简单些）