Html 将带有输入组插件的文本框大小调整为与不带插件的文本框大小相同

Html 将带有输入组插件的文本框大小调整为与不带插件的文本框大小相同,html,css,asp.net-mvc,twitter-bootstrap,Html,Css,Asp.net Mvc,Twitter Bootstrap,我有一个带有两个文本框的表单,其中一个有classinput group addon以显示一个欧元符号。从逻辑上讲,这会占用空间,但现在文本框在表单中突出。请参见屏幕截图: 以下是该字段的代码: <div class="form-group row"> @Html.LabelFor(m => m.EstimateAmount, new { @class = "col-md-2 control-label" }) <div class="col-md-10"&

我有一个带有两个文本框的表单,其中一个有class
input group addon
以显示一个欧元符号。从逻辑上讲,这会占用空间,但现在文本框在表单中突出。请参见屏幕截图:

以下是该字段的代码:

<div class="form-group row">
   @Html.LabelFor(m => m.EstimateAmount, new { @class = "col-md-2 control-label" })
   <div class="col-md-10">
      <div class="input-group">
         <span class="input-group-addon">
            <span class="mif-eur"></span>
         </span>
         @Html.TextBoxFor(m => m.EstimateAmount, new { @class = "form-control", placeholder = "" })
      </div>
   </div>
</div>

@LabelFor(m=>m.EstimateAmount,新的{@class=“col-md-2控制标签”})
@TextBoxFor(m=>m.EstimateAmount,新的{@class=“form control”,placeholder=”“})
下面是一个用于演示的JSFIDLE:

我怎样才能修复这个问题,使每个文本框的结果都是一样的(不管其他文本框是否应该增长,或者带有插件的文本框是否应该收缩)?有关所需结果,请参见下面的屏幕截图:


如果在css上。在这种情况下,我更喜欢

.input-group-addon {position absolute; top: 0; left: 0;}

和.input group为您的。input group插件+框大小:边框框;因此,填充不会扩展.input组的原始大小

您必须将css最大宽度应用于.form组,而不是应用于输入,我还将在加载项中放置一个图标,而不是键盘符号:

。表单组{
最大宽度:280px;
}

档案摘要
安特卫普
拉明斯贝德拉格
范因迪宁体育场
印地安

尝试包装标签@Whisher标签已经获得了
col-md-2
类,用该类包装一个div没有任何区别。你有哪个版本的引导?@SilverSurfer我在引导3.3.7如果你能用相关的html制作一个片段示例,请尝试应用这个,但这似乎没有什么不同。我已经用一个屏幕截图更新了我的问题,以获得想要的结果。哦,确保输入组位置相对,确保它有框大小:边框框;最大宽度:100%我的代码中有一个图标,但它来自Bootstrap以外的另一个库,这就是为什么我为了演示而键入这个符号。另外,我在
输入组
上添加了
最大宽度
属性,而不是
表单组
。但你的回答确实为我提供了解决办法!:)