输入宽度引导

Question

我有一个表格使用的引导，但是当我加载页面的输入字段宽度通吃的页面，就像这样：

我的代码：

<div class="form-group"> 
    <form action="adicionaProduto" method="post"> 
     <label for="nome">Nome</label> 
     <input type="text" name="nome" class="form-control"/><br><br> 
     <label for="nome">Valor</label> 
     <input type="text" name="valor" class="form-control"/><br><br> 
     <label for="nome">Quantidade</label> 
     <input type="text" name="quantidade" class="form-control"/><br><br> 
     <label for="nome">Código</label> 
     <input type="text" name="cod" class="form-control"/><br><br> 
     <button type="submit" class="btn btn-default">Novo</button> 
    </form> 
</div> 

我希望这个领域比这个小。我在输入标签中尝试了width =“”，但没有奏效。

我没有经验的前端。谢谢。

Answer 1

使用引导脚手架。把它放在

<div class="row"> 
<div class="col-md-6"> your form></div> 
</div> 

啊，用col-md-xxx你可以调整大小。请参阅：http://getbootstrap.com/css/#grid-example-basic

Answer 2

添加直接造型输入字段

例如

<input type="text" style="width:250px;" name="nome" class="form-control"/> 

而且

<input type="text" style="max-width:250px;" name="nome" class="form-control"/> 

你也可以把它放在一个div监管宽度

例如

<div style="max-width:250px"> 
<input type="text" name="nome" class="form-control"/> 
</div> 

Answer 3

这是因为您的引导程序模板为这些输入标签指定了css。您可以检查您的网页，看看有什么CSS是在内容应用，你可以把这样的事情在你的CSS文件替换你想要的CSS：“重要的”

input{ 
width: 50%!important; 
} 

关键字会让你css先走。