Question

我有一个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 -->

当optgroup为Dates时，我想减小narrowon1和narrowon2的宽度，这样它们每个只能容纳六位数;我在考虑设置size =“6”。但是，当我只是通过诸如

之类的语句在jQuery中添加这些属性时

$('#narrowon1').attr('size',"6");

它们不会影响渲染输出。我希望Bootstrap类重写我的补充。

什么是“Bootstrap-friendly”方式来改变这些输入框的大小？

Answer 1

应用maxlength的{{1}}不会影响CSS属性。你如何在<input>中应用它，因为你不能用CSS限制字符长度？

我认为您可能会将javascript属性误认为maxlength的实际width。以下是有关属性的一些信息：Maxlength Attribute

查看日志并确保<input>看起来像这样：

<input>

修改

在输入上放置一个自己的类，并在<input maxlength="6" name="someInput" />上放置新样式。确保在引导程序<input>之后加载本地CSS文件。比你可以轻松覆盖它。

如果您无法创建新的CSS文件，请使用CSS
尝试$('input').css('width', '200px');

Answer 2

您需要使用col-sm-2类将每个输入字段包装在div中你可以改变你喜欢的号码。

Answer 3

您可以使用自己的CSS覆盖它们来自定义Bootstrap样式。

有关如何完成的信息，请参阅Bootstrap网站上的“自定义”部分：

http://getbootstrap.com/getting-started/#customizing

以Bootstrap内联形式控制<input />框大小

3 个答案: