我尝试使用带有引导选择的Label 2,但它看起来与引导(标签1)不同。如何在下面的代码中获取两个标签看起来是一样的?
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="description" content=""> <Meta name="author" content=""> <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png"> <title>Test</title> <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" > <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css"> <link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon">Labe 1</span> <input type="text" class="form-control" name="snpid" placeholder="Test"> <span class="input-group-btn"> <button class="btn btn-default" type="submit">GO!</button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> <div> <BR/> <HR> <div class="container"> <form class="form-inline"> <div class="form-group"> <span class="input-group-addon">Label 2</span> </div> <div class="form-group"> <select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ..."> <option>Hot Dog,Fries and a Soda</option> <option>Burger,Shake and a Smile</option> <option>Sugar,Spice and all things nice</option> <option>Baby Back Ribs</option> <option>A really really long option made to illustrate an issue with the live search in an inline form</option> </select> </div> </form> <div> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script> <script> $('.selectpicker').selectpicker(); </script> </body> </html>
解决方法
从Bootstrap
docs:
Extend form controls by adding text or buttons before,after,or on both sides of any text-based
<input>
. Use.input-group
with an.input-group-addon
or.input-group-btn
to prepend or append elements to a single.form-control
.
您需要在.input-group中包装select和.input-group-addon:
<div class="input-group"> <span class="input-group-addon">Label 2</span> <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ..."> <option>Hot Dog,Fries and a Soda</option> <option>Burger,Shake and a Smile</option> <option>Sugar,Spice and all things nice</option> <option>Baby Back Ribs</option> <option>A really really long option made to illustrate an issue with the live search in an inline form</option> </select> </div>
一探究竟:
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <div class="container"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon">Labe 1</span> <input type="text" class="form-control" name="snpid" placeholder="Test"> <span class="input-group-btn"> <button class="btn btn-default" type="submit">GO!</button> </span> </div> </div> <br> <hr> <div class="container"> <form class="form-inline"> <div class="input-group"> <span class="input-group-addon">Label 2</span> <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ..."> <option>Hot Dog,Spice and all things nice</option> <option>Baby Back Ribs</option> <option>A really really long option made to illustrate an issue with the live search in an inline form</option> </select> </div> </form> </div> </div>
原文地址:https://www.jb51.cc/jquery/182085.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。