加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > asp.Net > 正文

asp.net-mvc – 在默认的asp.net mvc 5模板中输入-group-addon之

发布时间:2020-12-16 04:35:26 所属栏目:asp.Net 来源:网络整理
导读:如何重现: 创建新的ASP.Net MVC项目 添加模型 添加带有脚手架视图的控制器 在浏览器中打开Create.cshtml,然后使用firebug或开发人员工具更改任何“表单组”: 来自: div class="form-group" label class="control-label col-md-2" for="Name"Name/label di
如何重现:

>创建新的ASP.Net MVC项目
>添加模型
>添加带有脚手架视图的控制器
>在浏览器中打开Create.cshtml,然后使用firebug或开发人员工具更改任何“表单组”:

来自:

<div class="form-group">
   <label class="control-label col-md-2" for="Name">Name</label>
   <div class="col-md-10">
      <input name="Name" class="form-control text-box single-line" id="Name" type="text" value="">
   </div>
  <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="Name"></span>
</div>

至 :

<div class="form-group">
   <label class="control-label col-md-2" for="Title">Title2</label>
   <div class="col-md-10">
      <div class="input-group">
        <input name="Title" class="form-control text-box single-line" id="Title" type="text" value="">
        <span class="input-group-addon">@</span>
      </div>
   </div>
</div>

我们只是将“input”放在“div”中,并使用“class =’input-group’”并添加“input-group-addon”

结果非常奇怪,它看起来像这样:
http://i.imgur.com/ylpYJKh.png

但正确的结果是这样的:
http://jsfiddle.net/6t3d9z8e/

这是ASP.Net MVC 5默认模板的错误还是什么?

解决方法

这是bootstrap css和microsoft默认样式之间交互的有趣bug.

请参阅默认的css文件“Site.css”并在注释后删除块在表单输入元素上设置宽度,因为默认情况下它们是100%宽,其中在输入上设置max-width属性.

如果你想按大小限制输入,你应该通过bootstrap的col-md -…类来完成.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读