twitter bootstrap - "glyphicon glyphicon-search" button is not attached to text field -
twitter bootstrap - "glyphicon glyphicon-search" button is not attached to text field -
i have in navbar-right search field button. however, button below search field. how possible attach button search field?
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="{{url_for('home')}}">test</a> </div> <div class="navbar-collapse collapse" id="navbar-collapsible"> <ul class="nav navbar-nav navbar-left"> <li class="active"><a href="{{url_for('home')}}">home</a></li> </ul> <ul class="nav navbar-nav navbar-right" role="search"> <form class="navbar-form" method="get" action="{{ url_for('search')}}" role="form"> <div class="form-group" style="display:inline;"> <div class="input-group"> <input class="form-control" type="text" name="snpid" placeholder="e.g. hello"> <button class="btn btn-default"><span class="glyphicon glyphicon-search" type="submit"></span></button> </div> </div> </form> </ul> </div><!--/.nav-collapse --> </div> </div>
add form-inline
class input
parent div
jsfiddle - demo
<div class="form-inline"> <input class="form-control" type="text" name="snpid" placeholder="e.g. hello"> <button class="btn btn-default"><span class="glyphicon glyphicon-search" type="submit"></span></button> </div>
or: remove parent div.input-group
, add together navbar-right
class form
position form on right.
jsfiddle - demo
<form class="navbar-form navbar-right" method="get" action="{{ url_for('search')}}" role="form"> <div class="form-group"> <input class="form-control" type="text" name="snpid" placeholder="e.g. hello"> <button class="btn btn-default"> <span class="glyphicon glyphicon-search" type="submit"></span> </button> </div> </form>
twitter-bootstrap twitter-bootstrap-3 flask
Comments
Post a Comment