Loading... ** 研究了一下发现在一个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> 大屏幕下: ![大屏幕下][1] 小屏幕下: ![小屏幕下][2] 但小屏幕的表单那条线没想通 [1]: http://ws1.sinaimg.cn/large/005LiQFdgy1fw1bi3y56yj30pk0313yo.jpg [2]: http://ws1.sinaimg.cn/large/005LiQFdgy1fw1biy67ztj30g80a50uh.jpg 最后修改:2019-08-09 © 允許規範轉載 讚賞 讚賞作者 支付宝微信 赞 如果覺得我的文章對你有用,請隨意讚賞