屏幕还没小于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>
亲是不是没引入bootstrap的CSS文件?我按照老师的写法,并没有换行呀。
注意:form表单需要写在导航条的容器内,写在容器外必定会换行。同时,笔记本的窗口太小,换个分辨率试试?
然后你的栅格系统中,你给表单设置了col-md-4,可是你却把表单写在了导航条的col-md-6的结束标签之前,导致内容超出(或者是冲突,我没参试,但是看出你这里写错了)而换行,你把表单移出导航条试试?
代码能放出来吗?