Css 为什么引导不尊重我的网格布局？_Css_Html_Twitter Bootstrap_Twitter Bootstrap 3

Css 为什么引导不尊重我的网格布局？

css html twitter-bootstrap twitter-bootstrap-3

Css 为什么引导不尊重我的网格布局？,css,html,twitter-bootstrap,twitter-bootstrap-3,Css,Html,Twitter Bootstrap,Twitter Bootstrap 3,我正在使用Bootstrap创建一个有4个事件的响应日历，并且我希望每一个事件都显示全宽，1显示在每一行（xs&sm大小）和2显示在每一行（md&lg大小）我尝试在每个事件上使用网格布局，但它没有在每行显示2  <div class="row"> <div class="div-event"> <span class="date-event col-xs-2 col-sm-2 col

我正在使用Bootstrap创建一个有4个事件的响应日历，并且我希望每一个事件都显示全宽，1显示在每一行（xs&sm大小）和2显示在每一行（md&lg大小）

我尝试在每个事件上使用网格布局，但它没有在每行显示2

<!--Event 1-->     
    <div class="row">
     <div class="div-event">

      <span class="date-event col-xs-2 col-sm-2 col-md-1 col-lg-1"><span class="num-date-event">22</span>    <br>SEP</span>

      <button class="btn btn-event btn-block col-xs-8 col-sm-8 col-md-4 col-lg-4" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">Katy's Super Party<br>at her house</button>

      <span class="glyphicon glyphicon-gift icon-event col-xs-2 col-sm-2 col-md-1 col-lg-1" aria-     hidden="true"><span class="text-event"><br>PARTY</span></span>

        <div class="collapse" id="collapse-1"> 
        <div class="well">
          ...
        </div>
        </div> 

     </div>
   </div>


9月22日
凯蒂在她家的超级派对


聚会
...

有人能看出我做错了什么吗？非常感谢

这里是日历的一部分：

我想你还没有理解引导网格是如何工作的。它被分解为一个由12列组成的网格，分布在视图端口上。当您指定col-sm-2类时，它将占用2列宽。因此，如果您想让两个html元素占据一行，请对每个元素应用col-sm-6类。它们还应该包含在具有row类的div中

<div class="container">
  <div class="row">
    <span class="col-sm-6></span>
    <span class="col-sm-6></span>
  </div>
  <div class="row">
    <span class="col-sm-6></span>
    <span class="col-sm-6></span>
  </div>
</div>

这将是一个很好的起点。它将产生两行两个项目。

我想您还没有理解引导网格是如何工作的。它被分解为一个由12列组成的网格，分布在视图端口上。当您指定col-sm-2类时，它将占用2列宽。因此，如果您想让两个html元素占据一行，请对每个元素应用col-sm-6类。它们还应该包含在具有row类的div中

<div class="container">
  <div class="row">
    <span class="col-sm-6></span>
    <span class="col-sm-6></span>
  </div>
  <div class="row">
    <span class="col-sm-6></span>
    <span class="col-sm-6></span>
  </div>
</div>

这将是一个很好的起点。它将产生两行两个项目。

引导列以12为底，这意味着屏幕宽度被划分为12个相等的响应列。当需要全宽时，可以使用类似于

col-md-12

的内容。如果需要半宽，可以使用

col-md-6

。另外，当使用

行时，

将所有列分组为in。由于在大屏幕或中等屏幕上，您希望事件能够响应并“配对”，因此需要将所有事件放入一行，而不是将它们分割成多行

这应该让你开始对你当前的结构做些什么

.event{
高度：100px；
背景颜色：浅灰色；
边框：1px纯黑；
}


事件
事件
事件
事件