如何在bootstrap中自定义input字段宽度3

在删除了input-xlargeinput-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>