我的表单控件样式在MVC中重写

Question

我正在使用bootstrap 3.7并且一些额外的css覆盖了某些样式。 在添加Bootstrap css 3.7及其插件之前，我的控制长度是正确的。 现在控制宽度很短。

当我在浏览器中检查我的一些文本框时，系统显示下面应用的css样式。请参阅并指导。

<link href="~/Theme/Bootstrap37/css/bootstrap.min.css" rel="stylesheet" /> 
<link href="~/Theme/Bootstrap37/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/Theme/Bootstrap37/css/custom-bootstrap.css" rel="stylesheet" />
@*<link href="~/Theme/Bootstrap37/css/OPD_new.css" rel="stylesheet" />*@
<link href="/Theme/css/font-awesome.min.css" rel="stylesheet">
<link href="/Theme/css/animate.min.css" rel="stylesheet">
<link href="/Theme/css/prettyPhoto.css" rel="stylesheet">
<link href="/Theme/css/main.css" rel="stylesheet">
<link href="/Theme/css/responsive.css" rel="stylesheet">
<link href="~/Theme/bootstrap-datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="~/Content/toastr.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  .form-group .form-control {
    padding: 7px 12px;
    padding: 7px 12px;
    /* border-color: #f2f2f2; */
    box-shadow: none;
    border-radius: 0px;
    box-shadow: none;
}
main.css:3128
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 18px;
    line-height: 1.428571429;
    vertical-align: middle;
    background-color: #edf8f7;
    background-image: none;
    border: 1px solid #8dc6cd;
    /* border-radius: 4px; */
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    height: 49px;
}
forms.less:119
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
forms.less:118
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
scaffolding.less:48
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
normalize.less:323
input {
    line-height: normal;
}
normalize.less:257
button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}
site.css:22
input, select, textarea {
    max-width: 280px;
}
bootstrap.css [sm]:1087
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
normalize.less:322
input {
    line-height: normal;
}
normalize.less:252
button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}
bootstrap.css:1062
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
vendor-prefixes.less:77
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] {
    padding: 1px 0px;
}
user agent stylesheet
input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    user-select: text;
    cursor: auto;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}
user agent stylesheet
input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em 0em 0em 0em;
    font: 13.3333px Arial;
}
user agent stylesheet
input, textarea, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}
Inherited from div.inputgroup
main.css:3324
.inputgroup {
    position: relative;
    display: table;
    border-collapse: separate;
}
Inherited from body.homepage
main.css:14
body {
    background: #fff;
    font-family: 'Roboto', sans-serif;
    color: #54667a;
    line-height: 22px;
}
scaffolding.less:32
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}
scaffolding.less:31
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}
Inherited from html.js.flexbox.flexboxlegacy.canvas.canvastext.webgl.no-touch.geolocation.postmessage.websqldatabase.indexeddb.hashchange.history.draganddrop.websockets.rgba.hsla.multiplebgs.backgroundsize.borderimage.borderradius.boxshadow.textshadow.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.csstransforms3d.csstransitions.fontface.generatedcontent.video.audio.localstorage.sessionstorage.webworkers.applicationcache.svg.inlinesvg.smil.svgclippaths
scaffolding.less:27
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
normalize.less:10
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
bootstrap.css [sm]:1072
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
normalize.less:9
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
Pseudo ::before element
bootstrap.css:1068
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
vendor-prefixes.less:77
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Pseudo ::after element
bootstrap.css:1068
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

vendor-prefixes.less:77
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 1

输入字段没有占据父级的全宽，因为在你的 你有site.css文件

input,select, textarea { max-width: 280px; } 

删除最大宽度道具，它将采用全宽