Thursday, 15 January 2015

Search form breaks up in responsive Twitter Bootstrap site -



Search form breaks up in responsive Twitter Bootstrap site -

i'm using twitter bootstrap create responsive site. i'm loving frame work , works fine, except search form have in header. kind of big , expands on 7 grids, , when create window smaller ca 512 px submit button slips downwards under input area, not neat. i'm using "form-horizontal" class, documentation suggests should use.

here's code form section. help much appreciated!

<div class="row"> <div class="span7"> <form class="form-horizontal" id="searchfield" action="search.php" method="get"> <input name="address" placeholder="write something..." type="text" class="span7 search-query field"> <button type="submit" class="btn-primary">search</button> </form> </div> <div class="span4"> <a href="form1.php"><button type="submit" class="btn btn-large btn-inverse span4">skapa boende</button></a> </div> </div>

what bootstrap responsive makes site 'responsive' user's viewport. means if viewport's width jumps below given point, layout changes. responsive sheet defines .span1-12 not float anymore, below point. placing 1 below other.

if don't want happen, have to: a. remove responsive sheet, or b. crazy ugly workarounds. lastly one, 1 shouldn't doing. though, work, chances of breaking features, big.

though, there might that's worth mentioning. there has been guy (arnold daniels) has created neat extentions bootstrap, including called 'desktop row'. it's row, responsive changes start @ tablet-viewport. not want, shows can alter responsive-sheet.

twitter-bootstrap responsive-design

No comments:

Post a Comment