Question

我有一个Bootstrap输入字段，我需要减小宽度。

我的代码

<input type="text" class="form-control" />

这里我尝试使用sm-input来减小宽度，但没有任何反应。

<input type="text" class="input-qty form-control input-sm" />

这是我的完整代码：

var row = $('<tr><td></td><td>' + $(this).text() + '</td><td>' + $(this).attr('RetailPrice') + '</td><td>' + '<input type="text" class="input-qty form-control col-md-2" data-id="' + $(this).val() + '" data-prod-id="' + $(this).attr('Value') + '">' + '</td><td>' + '<input type="text" class="ddd form-control">' + '</td><td class="tot">0</td><td><img id="imgdel" src="../../Images/delete.png" alt="" onclick="deleteclick(this)" title="Delete" /></td><td>' + $(this).attr('Value') + '</td></tr>');
table.append(row);

Answer 1

假设你正在使用Bootstrap 3给它一个＆＃34; col-md - ＆＃34;例如：

<input type="text" class="form-control col-md-4" />

或者如果这仍然很大：

<input type="text" class="form-control col-md-2" />

您应该查看有关网格系统的Bootstarp documentation。

用法：

<div class="row">
    <div class="col-md-4">
        <input type="text" class="form-control" />
    </div>
</div>

Answer 2

在form-control 100% width

仅使用row & columns逻辑，我们可以像这样控制宽度： DEMO

Answer 3

将表单控件包装在表单组中：

<div class="form-group col-md-4 col-sm-4">
    <input type="text" class="input-qty form-control" />
</div>

减少Bootstrap输入字段宽度

3 个答案: