twitter-bootstrap – Twitter Bootstrap 3.1.1 navbar-right溢
发布时间:2020-12-18 00:05:48 所属栏目:安全 来源:网络整理
导读:我正在试验Twitter Bootstrap 3.1.1中的Carousel示例,我已经陷入了第一道障碍.我想在导航栏中添加一个右对齐的搜索框,所以我添加了以下代码(我已经包含了一些现有的上下文代码): div class="navbar navbar-inverse navbar-static-top" role="navigation" di
我正在试验Twitter Bootstrap 3.1.1中的Carousel示例,我已经陷入了第一道障碍.我想在导航栏中添加一个右对齐的搜索框,所以我添加了以下代码(我已经包含了一些现有的上下文代码):
<div class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <!-- my insertion starts here --> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> </form> <!-- my insertion ends here --> </div> </div> </div> 插入的代码取自“组件”页面上的Twitter Bootstrap的“默认导航栏”.我已将它插入Carousel导航栏的等效位置,将“navbar-left”更改为“navbar-right”.不幸的是,搜索框悬挂在导航栏的右侧大约15-20像素(我还删除了上面示例中的“提交”按钮,但是如果我将其重新插入,则提交按钮会突出显示导航栏中的一样的方法).我在这做错了什么? (编辑:根据要求包含整个导航栏部分) 解决方法
您需要将内部容器切换到容器流体,以便它可以让div伸展.看一下这个:
http://www.bootply.com/115744 所以这 <div class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> 变为: <div class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> 编辑哎呀我不小心把你的div换成了导航. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- scala – Slick:创建数据库
- AngularJS:$HTTP.GET正在取消
- Angular2:从AngularJS 1.x 中学到的经验
- scala – 让sbt在类路径上放置javadoc和依赖源
- 变量环境设置错误引起bash:vi:command not find
- PowerShell导出服务器本地Administrators组内成员
- twitter-bootstrap – Twitter Bootstrap – 顶部导航栏阻止
- 简单的脚本,用于服务器应用的启停备份部署及回滚
- 基于Axis 1.4 部署WebService 笔记(四)
- 无法在angular2组件函数中读取undefined的属性’navigate’