如何在bootstrap中自定义input字段宽度3
在删除了input-xlarge
和input-large
等关键特性之后,bootstrap 3中的替代项是什么?
当然,我可以使用col-lg-12
等,但这是在选项卡窗格中出现错误。
我也可以使用style = "width:30px;
”但它会松散的响应不像input-xlarge
。任何build议等?
在Bootstrap 3中, .form-control
(给你input的类)的宽度为100%,这样可以将它们包装到col-lg-X divs中进行排列。 来自文档的示例:
<div class="row"> <div class="col-lg-2"> <input type="text" class="form-control" placeholder=".col-lg-2"> </div> <div class="col-lg-3"> <input type="text" class="form-control" placeholder=".col-lg-3"> </div> <div class="col-lg-4"> <input type="text" class="form-control" placeholder=".col-lg-4"> </div> </div>
请参阅“ 列大小” 。
这和Bootstrap 2.3.2有点不同,但是你很快就习惯了。
你可以使用这些类
inputLG
input
和
input-SM
input字段并用btnreplaceinputbutton。
检查这个文档http://getbootstrap.com/getting-started/#migration
这将只改变元素的高度,以减less使用网格系统类的宽度,如col-xs-* col-md-* col-lg-*
。
示例col-md-3
。 请参阅文档http://getbootstrap.com/css/#grid
我解决了我的主要CSS文件中的max-width
。
/* Set width on the form input elements since they're 100% wide by default */ input, select, textarea { max-width: 280px; }
这是一个简单的解决scheme,几乎没有“代码”
<form role="form"> <div class="form-group"> <div class="col-xs-2"> <label for="ex1">col-xs-2</label> <input class="form-control" id="ex1" type="text"> </div> <div class="col-xs-3"> <label for="ex2">col-xs-3</label> <input class="form-control" id="ex2" type="text"> </div> <div class="col-xs-4"> <label for="ex3">col-xs-4</label> <input class="form-control" id="ex3" type="text"> </div> </div> </form>
<div class="form-group"> <div class="input-group col-md-5"> <div class="input-group-addon"> <span class="glyphicon glyphicon-envelope"></span> </div> <input class="form-control" type="text" name="text" placeholder="Enter Your Email Id" width="50px"> </div> <input type="button" name="SIGNUP" value="SIGNUP"> </div>