Question

我正在创建一个响应式日历，以显示＆＃34;井＆＃34;当您单击名称（可折叠）时。

我希望按钮的全宽以及同一行上的日期和图标，但即使我使用Bootstrap网格，它仍然会以块为单位。

我该怎样做才能将所有内容包装在同一条线上并使其可折叠＆＃34;以及＃34;出现在下面？

这是一个事件的例子：

<!--Event 1-->     
    <div class="row">
     <div class="div-event">
      <span class="date-event col-xs-2 col-sm-2"><span class="num-date-event">22</span>    <br>SEP</span>

      <button class="btn btn-event btn-block col-xs-8 col-sm-8" 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" 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/6/

非常感谢你!!

Answer 1

在width: 65%中添加css btn-block并删除margin-top: -19px中的btn-event

http://jsfiddle.net/mrndrmrj/9/

内联多个元素与全宽按钮折叠（Bootstrap）

1 个答案: