[英]Multiple elements inline with full width button that collapses (Bootstrap)
我正在创建一个响应式日历,当您单击名称(可折叠)时,它会在“井”上显示额外的信息。
我希望按钮在同一行上具有全角以及日期和图标,但是即使我使用的是Bootstrap网格,它也始终以块为单位。
我该怎么做才能将所有内容包装在同一行上,并使可折叠的“孔”显示在下面?
这是一个事件的示例:
<!--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/
提前非常感谢您!!
在CSS width: 65%
添加CSS width: 65%
btn-block
width: 65%
,并在btn-event
删除margin-top: -19px
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.