输入宽度引导程序

Question

我有一个使用bootstrap的表单，但是当我加载页面时，输入字段宽度占用了所有页面，如下所示：

我的代码：

<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

这是因为您的引导程序模板为这些输入标记指定了css。您可以检查您的网页，看看哪些css应用于元素，您可以通过在.css文件中添加这样的内容来替换您想要的CSS：

input{
width: 50%!important;
}

关键字＆＃34;！important＆＃34;会让你的css先走。

Answer 2

使用Bootstrap脚手架。把它放在

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

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

Answer 3

直接在输入字段中添加样式

例如

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

另外

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

您也可以将它放在宽度调节

的div上

e.g。

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