twitter-bootstrap 在 Bootstrap 内联表单中控制 <input> 框的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21171753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Controlling <input> box sizes in a Bootstrap inline form
提问by user1416227
I have a bootstrap v3 inline form:
我有一个 bootstrap v3 内联表单：
<div id="searchsection" hidden>
<form id="searchform" class="form-inline" role="form">
<label>Find:</label>
<select id="field" class="form-control">
<optgroup label="Strings">
<option value="authors" selected="selected">Authors</option>
<option value="title">Title</option>
<option value="pub">Publication Name</option>
<option value="keywords">Keywords</option>
<option value="physloc">Physical Location</option>
<option value="comment">Comment</option>
</optgroup>
<optgroup label="Dates">
<option value="datepub">Publication Date</option>
<option value="dateread">Date Read</option>
</optgroup>
</select>
<input type="text" id="narrowon1" class="form-control"/>
<label for="narrowon2" class="form-control"></label>
<input type="text" id="narrowon2" class="form-control" placeholder="YYYYMM" hidden/>
<input type="button" id="narrower" name="narrower" value="Narrow" class="form-control btn btn-primary"/>
<input type="button" id="widener" name="widener" value="Widen" class="form-control btn btn-primary"/>
</form>
</div> <!-- end of searchsection -->
I would like to reduce the width of the boxes narrowon1 and narrowon2 when the optgroup is Dates so that they would only hold six digits each; I am thinking of setting size="6". However, when I simply add those attributes in jQuery via a statement such as
当 optgroup 为 Dates 时，我想减少窄框 1 和窄 2 的宽度，以便它们每个只能容纳六位数字；我正在考虑设置 size="6"。但是，当我通过诸如
$('#narrowon1').attr('size',"6");
they don't affect the rendered output. I expect the Bootstrap classes are overriding my additions.
它们不会影响渲染的输出。我希望 Bootstrap 类会覆盖我的添加。
What is a "Bootstrap-friendly" way to alter the sizes of these input boxes?
什么是改变这些输入框大小的“Bootstrap-friendly”方式？
回答by Phil
The maxlengthattribute will not be affected by any CSSapplied to the <input>. How are you applying it in javascriptas you can't limit the character length with CSS?
该maxlength属性不会受到任何CSS应用于<input>. 你如何应用它，javascript因为你不能用 CSS 限制字符长度？
I think you might be mistaking the maxlengthattribute with the actual widthof the <input>. Here is a some info on the attribute: Maxlength Attribute
我想你可能会误将maxlength实际属性width的<input>。这是有关该属性的一些信息：Maxlength Attribute
View the log and make sure your <input>looks like this:
查看日志并确保您<input>看起来像这样：
<input maxlength="6" name="someInput" />
Edit:
编辑：
Place a class of your own on the input and place new styles on the <input>. Make sure your local CSSfile loads after the bootstrap CSS. Than you can easily override it.
在输入上放置一个您自己的类并在<input>. 确保CSS在 bootstrap 之后加载本地文件CSS。比您可以轻松覆盖它。
If you can't create a new CSSfile, try $('input').css('width', '200px');with jQuery
如果您无法创建新CSS文件，请尝试$('input').css('width', '200px');使用jQuery
回答by yassine2020
You'll need to wrap each input field inside a div with the class of col-sm-2 you can change the number with which ever you like.
您需要使用 col-sm-2 类将每个输入字段包装在一个 div 中，您可以随心所欲地更改数字。
回答by henrywright
You can customise Bootstrap styles by overriding them with your own CSS.
您可以通过使用您自己的 CSS 覆盖它们来自定义 Bootstrap 样式。
See the Customizing section on the Bootstrap website for information on how it's done:
有关如何完成的信息，请参阅 Bootstrap 网站上的自定义部分：
