jquery - Multiple elements inline with full width button that collapses (Bootstrap) -


i'm creating responsive calendar shows info on "well" when click on name (collapsable).

and want button full-width along date , icon on same line, when i'm using bootstrap grid keeps making in blocks.

what can wrap on same line , make collapsable "well" appear below?

this example of 1 event:

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

and here fiddle of calendar: http://jsfiddle.net/mrndrmrj/6/

thank in advance!!

add in css width: 65% in btn-block , remove margin-top: -19px in btn-event

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


Comments

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

c# - Get rid of xmlns attribute when adding node to existing xml -