Question

我在 navbar-right 中有一个带按钮的搜索字段。但是，该按钮位于搜索字段下方。如何将按钮附加到搜索字段？

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

Answer 1

将form-inline课程添加到您的input家长

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：删除额外的父div.input-group，您还可以将navbar-right课程添加到form，以便将表单放在右侧。

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>

“glyphicon glyphicon-search”按钮未附加到文本字段

1 个答案: