**

研究了一下发现在一个nav里的form-group好像只能通过栅格布局实现同行显示

**

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse"
        data-target="#nav-menu">
          <span class="sr-only">切换导航</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Sushome</a>
      </div>
      <div class="collapse navbar-collapse" id="nav-menu">
        <ul class="nav navbar-nav">
          <li><a href="#">java</a></li>
          <li><a href="#">python</a></li>
          <li><a href="#">c++</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              web <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">html</a></li>
              <li><a href="#">javascript</a></li>
              <li><a href="#">bootstrap</a></li>
              <li class="divider"></li>
              <li><a href="#">php</a></li>
            </ul>
          </li>
          <li>
            <div class="visible-xs">
              <form action="" class="navbar-form navbar-right " role="search">
                <div class="form-group col-xs-9">
                  <input type="text" class="form-control" placeholder="search">
                </div>
                <button type="submit" class="btn btn-default col-xs-3">submit</button>
              </form>
            </div>
          </li>
        </ul>
        <div class="hidden-xs">
            <form action="" class="navbar-form navbar-right " role="search">
              <div class="form-group col-xs-9">
                <input type="text" class="form-control" placeholder="search">
              </div>
              <button type="submit" class="btn btn-default col-xs-3">submit</button>
            </form>
          </div>
      </div>
      </div>
   </nav>

大屏幕下:
大屏幕下
小屏幕下:
小屏幕下
但小屏幕的表单那条线没想通

最后修改:2019 年 08 月 09 日 07 : 50 PM
如果覺得我的文章對你有用,請隨意讚賞