twitter bootstrap - "glyphicon glyphicon-search" button is not attached to text field -
I have a navbar-right search field with a button though, below the button search field is. How is it possible to attach a button to the search field? Add JSFiddle - OR: Remove additional parent
& lt; Div class = "navbar navbar-default navbar-fixed-top" role = "navigation" & gt; & Lt; Div class = "container" & gt; & Lt; Div class = "navbar-header" & gt; & Lt; Button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = ". Navbar-collapse" & gt; & Lt; span class = "sr-only" & gt; Toggle Navigation & lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; A class = "navbar-brand" href = "{{url_for ('home')}}" & gt; Test & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "navbar-collapse collapse" id = "navbar-collapsible" & gt; & Lt; Ul class = "nav navbar-nav navbar-left" & gt; & Lt; Li class = "active" & gt; & Lt; A href = "{{url_ ('home')}}" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Ul class = "nav navbar-nav navbar-right" role = "search" & gt; & Lt; Form class = "navbar-form" method = "get" action = "{{url_for ('search')}}" role = "form" & gt; & Lt; Div class = "form-group" style = "display: inline;" & Gt; & Lt; Div class = "input-group" & gt; & Lt; Input class = "form-control" type = "text" name = "snpid" placeholder = "eg Hello" & gt; & Lt; Button class = "btn btn-default" & gt; Span class = "glyphicon glyphicon-search" type = "submit" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Form & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt ;! - /. Nav-collapse - & gt; & Lt; / Div & gt; & Lt; / Div & gt;
form-inline class in your
Parent Dive
div.input-group and you can also add
navbar-right
Comments
Post a Comment