Question

我有一个带有输入字段的twitter bootstrap 3导航栏。我想增加输入字段的宽度。我已尝试设置col大小但不起作用。

html很长，所以请参考bootply。

http://www.bootply.com/LztVsLEz30

Answer 1

如果您检查元素，那么您将找到＆＃34; .navbar-form＆＃34;和＃34; .form-control＆＃34;宽度为auto。

test_method_a

因此，要增加输入的宽度，您需要将其宽度覆盖为：

@media (min-width: 768px)
.navbar-form .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

或单独作为

   <input type="text" class="form-control search-input" style="width:400px;" name="query" id="query" placeholder="prof or mod name or mod code">

Answer 2

您可以使用像素值来增加文本字段的宽度。

<input type="text" class="form-control search-input" name="query" id="query" placeholder="prof or mod name or mod code" style="500px;">

并使用响应模式的百分比值。

@media (min-width: 768px){
.navbar-form .form-control { 
    width: 100%; 
}}

Answer 3

在这里，我更新了您的链接，this is new的宽度为400px;。如果您不理解，请告诉我

Answer 4

HTML

<div class="form-group" id="remote-prof">
  <input type="text" class="form-control search-input" name="query" id="query" placeholder="prof or mod name or mod code">
</div>

CSS

div.form-group {
  width: 225px;
}
div.form-group input.form-control {
  width: 220px;
}

jsfiddle-link

Incrase bootstrap navbar输入字段宽度

4 个答案: