Updated Fiddle

Question

我正在使用Bootstrap创建一个响应式日历，其中包含4个事件，我希望每个事件中的每一个都显示为全宽， 1 （ xs＆amp;每行（ md＆amp; lg 尺寸），尺寸）和 2 。

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

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

有人能看出我做错了吗？真的很感激!!

以下是日历的小提琴：http://jsfiddle.net/mrndrmrj/10/

Answer 1

根据您当前的代码，让它按您所需的方式工作的最简单方法是删除所有行，只使用包含每个事件的一行，然后添加一个col-md-6类每个事件：

<!--Event 1-->
<div class="div-event col-md-6">
  <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 class="clearfix"></div>
</div>

Updated Fiddle

Answer 2

我想您已经错过了解自举网格的工作原理。它被分成一个横跨视口的12列网格。当您指定col-sm-2类时，它会占用2列宽。因此，如果您希望2个html元素占用一行，请为每个元素应用一个col-sm-6类。它们也应该包含在具有一类行的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>

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

Answer 3

bootstrap列的基数为12，这意味着屏幕宽度被分为12个相等的响应列。如果你想要全宽，你可以使用col-md-12之类的东西。如果您想要半宽，可以使用col-md-6。此外，当使用row时，它将所有列分组为。因为您希望事件响应并且当它是大屏幕或中等大小屏幕时“两对”，您需要将所有事件放入单个row而不是将它们分成多行。

http://jsfiddle.net/swm53ran/329/

这可以帮助您开始了解当前结构所需的工作

.event {
    height: 100px;
    background-color: lightgray;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div>
    <div class="row">
        <div class="event col-md-6 col-sm-12">EVENT</div>
        <div class="event col-md-6 col-sm-12">EVENT</div>
        <div class="event col-md-6 col-sm-12">EVENT</div>
        <div class="event col-md-6 col-sm-12">EVENT</div>
    </div>
</div>

您应该阅读有关bootstrap网格系统的文档：http://getbootstrap.com/css/#grid

为什么Bootstrap不尊重我的网格布局？

3 个答案:

Updated Fiddle