Question

我在同一行有两个输入，我希望两个输入字段都以宽度方式填充父容器（分别为“col-sm-10”和“col-sm-2”）。如果我这样离开：

<div class="col-sm-10">
    <label for="inputA">Cliente:</label>                
    <input class="form-control" id="inputA" />
</div>
<div class="col-sm-2">
    <label for="inputB">NIF:</label>
    <input class="form-control" id="inputB" />
</div>

Then I have no problem

但是，如果我在输入中添加某些属性（例如type =“text”或runat =“server”（我需要这个以编程方式处理输入）），the width of the first input changes and it no longer fills the parent container:

<div class="col-sm-10">
    <label for="inputA">Cliente:</label>                
    <input class="form-control" id="inputA" type="text" runat="server"/>
</div>
<div class="col-sm-2">
    <label for="inputB">NIF:</label>
    <input class="form-control" id="inputB" runat="server"/>
</div>

最令人惊奇的是，如果我将type =“text”更改为type =“number”就可以了。查看图片，因为我无法发布超过2个链接： i.stack.imgur.com/aN3us.png

我尝试使用CssClass =“form-control”控件，并发生相同的行为。

Answer 1

使用自定义宽度输入[type =＆＃34; text＆＃34;]检查您是否有任何css样式。

Answer 2

这里有example代码，运行完美。我认为你可能有另一种css风格覆盖你的风格。

您应该检查input[type='text']。我建议您打开浏览器开发人员工具选择您的输入类型，在右侧，您拥有适用于该元素的所有样式。您应该检查宽度，它还会告诉您文件来自哪个文件和行。

您也可以自己添加全宽

.col-sm-10 #inputA{
    width:100%;
}

带引导类的HTML输入字段：当我添加某些属性时，宽度会发生变化

2 个答案: