兄弟呀你问问题要把你的源码贴出来！

可以在自己的样式表中用他的类名 重新写一个颜色 会覆盖原有样式表的颜色的，其他方法暂时不知道。还有一些网站可以修改这些颜色之类的，比如https://work.smarchal.com/twbscolor/3.3.7/css/e74c3cc0392becf0f1ffbbbc0 不过我没用过

栅格布局划分成12列 col-6也就是占据了一半的空间

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

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

</p>

这样是可以实现的，是不是一开始的css文件没导入

你是怎么写的，是nav有一个container，下面布局又有一个！

先说结果：不是隐藏了，而是跑到页面的最下面。

因为它是栅格布局的一部分，并且被分配了col-md-3；

当屏幕不断缩小，超过col-md的界限，col-md所规定的所有栅格便从水平排列，自动切换到堆砌饿的竖直排列；

因为左侧的col-md-9内容比较多（包含巨幕和内嵌的栅格），所以课程中list-group挤到下面后你看不到。

关于这一点老师没有拉下去给我们看罢了

是不是布局有问题，老师写了很多div嵌套，有可能你的嵌套搞错了没注意

没绑定事件怎么会有反应

可能是你引用错了，你看看路径引用对了没，这是我引用的

<link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>

这么快就没拉，这下碉堡了。还没完成一半、

看那个右边弹出的功能 老是想用自己手写js实现...

在xs时必然会列状排列

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

btn-sm

自己给弄明白了，其实不是文字越界，准确的讲是数字字符，输入的多了会越界，如果是英文单词或者中文文字就不会，因为在css里面找到了word-break:break-all;word-wrap:break-word;这个属性

学完该门课程可以继续学习《基于bootstrap的网页开发》

或者研究Bootstrap官网提供的模板案例

当然能啊

http://www.imooc.com/learn/141 

玩转Bootstrap（基础）篇欢迎您....

是指在bootstrap的官网上查相应的文档，http://WWW.bootcss.com

把button绑定事件

http://www.runoob.com/try/try2.php?filename=bootstrap3-gridsys-columnreset

可以看到，这是用于调节手机显示的。初学者刚好碰到这个问题，不对请见谅

媒体查询

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

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

建议使用chrome浏览器，使用开发者工具查看网页源码学习

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">

框架里面有容器包裹，可以去看下源码，这样重新定义的时候就不会乱

js组件里直接就给定义好了。直接用就好