Question

我正在使用Bootstrap 3导航栏，无法弄清楚如何以小分辨率保持输入旁边的搜索按钮。如果您需要更多详细信息，请与我们联系。谢谢！

codepen: http://codepen.io/anon/pen/vOQJKp?editors=100

大屏幕（看起来不错）：

小屏幕：

HTML：

 <div class="container">

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>


        </div>


        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>

            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Pages <strong class="caret"></strong></a>

              <ul class="dropdown-menu">
                <li><a href="#">page 1</a></li>
                <li><a href="#">page 2</a></li>
                <li class="divider"></li>

              </ul>
            </li>

            <li>
              <form class="navbar-form pull-left" action="#">
                <input type="text" name="q" class="form-control" placeholder="" id="searchInput">
                <button type="submit" name="sa" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
              </form>

            </li>
          </ul>

          <ul class="nav navbar-nav pull-right navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> Account <strong class="caret"></strong></a>

              <ul class="dropdown-menu">
                <li><a href="#">Address</a></li>
              </ul>

            </li>
          </ul>
        </div>



      </div>

    </nav>


  </div>

Answer 1

<div class="col-lg-6">
<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div>

example

把它放在表格里面。我应该感谢你，因为我希望为我的页面做同样的事情，多亏你，我找到了它

Answer 2

将其添加为按钮组：

 <div class="row">

 <div class="col-lg-6">
 <div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
      <button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-search"></span></button>
  </span>
 </div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->

http://davist11.github.io/jQuery-Stickem/

搜索按钮不与输入字段内联

2 个答案: