问答详情
源自:6-4 带表单的导航条

表单换行怎么解决呀

屏幕还没小于768,表单换行了,我给他们加栅格系统,还是会换行,老师能不能弄成不换行的代码给我看看,问了好多人都没告诉我,自学好难

<div class="navbar navbar-default" role="navigation"> 

  <div class="row">

  <div class="navbar-header col-md-2"> 

  <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 

  <span class="sr-only">Toggle Navigation</span> 

  <span class="icon-bar"></span> 

  <span class="icon-bar"></span> 

  <span class="icon-bar"></span> 

  </button> <!-- 确保无论是宽屏还是窄屏,navbar-brand都显示 --> 

  <a href="##" class="navbar-brand">慕课网</a> 

  </div> <!-- 屏幕宽度小于768px时,div.navbar-responsive-collapse容器里的内容都会隐藏,显示icon-bar图标,当点击icon-bar图标时,再展开。屏幕大于768px时,默认显示。 -->

  <div class="collapse navbar-collapse navbar-responsive-collapse col-md-6"> 

  <ul class="nav navbar-nav"> 

  <li class="active">

  <a href="##">网站首页</a>

  </li>

  <li>

  <a href="##">系列教程</a>

  </li> 

  <li>

  <a href="##">名师介绍</a>

  </li>

<li class="divider"><a ></a></li>

<li class="divider"><a ></a></li>

<li class="divider"><a ></a></li>

<li><a href="##">成功案例</a></li> 

<li><a href="##">关于我们</a></li> 

  </ul>

  <form action="##" class="navbar-form navbar-right col-md-4" rol="search">

       <div class="form-group">

      <input type="text" class="form-control" placeholder="请输入关键词" />

       </div>

        <button type="submit" class="btn btn-default">搜索</button>

     </form>

  </div> 

 

  </div>


提问者:黑冰客 2016-12-01 12:28

个回答

  • 风飘叶摇
    2017-03-31 00:12:14

    亲是不是没引入bootstrap的CSS文件?我按照老师的写法,并没有换行呀。

    注意:form表单需要写在导航条的容器内,写在容器外必定会换行。同时,笔记本的窗口太小,换个分辨率试试?

    然后你的栅格系统中,你给表单设置了col-md-4,可是你却把表单写在了导航条的col-md-6的结束标签之前,导致内容超出(或者是冲突,我没参试,但是看出你这里写错了)而换行,你把表单移出导航条试试?

  • qq_总有奸臣想害朕_04336067
    2016-12-01 13:50:40

    代码能放出来吗?