Mein Formular steuert Stil überschreibt in MVC

Question

Ich benutze Bootstrap 3.7 und einige zusätzliche Css überschreibt einige Stile. Meine Kontrolllänge war korrekt, bevor ich den Bootstrap CSS 3.7 und sein Plugin hinzufüge. steuert jetzt Breite ist kurz.

Wenn ich einige meiner Textbox im Browser überprüfe, zeigen System unten angewandte CSS-Stile. PLZ sehen und führen.

<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

Eingabefelder nehmen nicht die volle Breite der Eltern ist es, weil in Ihrer site.css Datei

haben

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

remove max-width Stütze und es wird in voller Breite