*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container{
  margin-left: auto;
  margin-right: auto;
  padding-right: 15px;
  padding-left: 15px;
  height: 300px;
}
.row > div > div{
  height: 300px;
  background: green;
}
.row > div:nth-child(odd)>div{
  background-color: yellow;
}
.all-event-list[class*=col-md]{
  padding-left: 10px;
  padding-right: 10px;
}
.row:after{
  content: "";
  display: block;
  clear: both;
}
/*手机 一行2个盒子*/
@media(max-width:767px){
  .col-xs-1,
  .col-xs-2,
  .col-xs-3,
  .col-xs-4,
  .col-xs-5,
  .col-xs-6,
  .col-xs-7,
  .col-xs-8,
  .col-xs-9,
  .col-xs-10,
  .col-xs-11,
  .col-xs-12{
      float:left;
  }
  .col-xs-6{
      width: 50%;
  }
}

/*ipad 竖着*/
@media(min-width:768px){
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12{
      float:left;
  }
  .col-sm-4{
      width: 33.33333%;
  }
}

/* tablet iphones */
@media(min-width:992px){
  .container{
      width: 970px;
      background: blue;
      opacity: 0.1;   /*半透明*/
  }
  .col-md-1,.col-md-2,.col-md-3,
  .col-md-4,.col-md-5,.col-md-6,
  .col-md-7,.col-md-8,.col-md-9,
  .col-md-10,.col-md-11,.col-md-12{
      float:left; /*用浮动离开文档流*/
  
  }

  .col-md-3{
      width: 25%;  /* 没限制一个宽度，颜色叠加*/
  }
}
/* big PC  */
@media(min-width:1200px){
  .container{
      width: 1140px; /* 盒子宽度*/
      background: red;
  }
}
