期望的结果:
有一个包含标题左侧标题的引导带面板和一个带有用于搜索的插件按钮的搜索文本字段.最后一个图标是一个选项/扳手按钮,用于设置一些面板主体选项.
有一个包含标题左侧标题的引导带面板和一个带有用于搜索的插件按钮的搜索文本字段.最后一个图标是一个选项/扳手按钮,用于设置一些面板主体选项.
现行代码:
<div class="container"> <div class="panel panel-primary"> <div class="panel-heading clearfix"> <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4> <div class="input-group pull-right"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button> <button class="btn btn-primary"><i class="glyphicon glyphicon-Wrench"></i></button> </div> </div> </div> <div class="panel-body"> Panel content </div> </div> </div>
解决方法
只需摆脱输入组中的.pull-right类.
<div class="container"> <div class="panel panel-primary"> <div class="panel-heading clearfix"> <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button> <button class="btn btn-primary"><i class="glyphicon glyphicon-Wrench"></i></button> </div> </div> </div> <div class="panel-body"> Panel content </div> </div> </div>
更新
如果你想要输入(我给它ID #Special)更小和右对齐,你可以通过CSS做这样的事情:
#Special { width: 200px; float: right; }
HTML:
<input id="Special" type="text" class="form-control" placeholder="Search">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。