twitter-bootstrap - 增加导航栏文本输入长度

Question

导航栏中的默认“搜索框”是：

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

我正在尝试增加input水平的长度，以便可以查看和输入更多文本。

如何增加文本框的长度？

Answer 1

将这个类添加到输入文本框的当前css类中

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control span10" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

我加span10，你可以加span4、span5、span6……看你想要的长度

Answer 2

您可以更改 CSS 属性width或使用 HTML 属性size。

CSS 示例：应该使search-class-here类的元素宽度为 400px

.search-class-here { width: 400px; }  

HTML 示例：应该使文本框的宽度约为 40 个字符。

<input type="text" size="40">