使用css网格对齐面板主体内部的输入框

Question

我已经使用CSS网格布局创建了一个登录。我想在面板体内实现一个表单输入框。但是，输入框不尊重面板主体内部。输入框在面板体外溢出。出于某种原因，代码正在使用正则的CSS。我只是想实现CSS网格，我不知道要做什么。

感谢您的任何帮助。

这是小提琴。

<pre> 

https://jsfiddle.net/80fc325h/

Answer 1

只需使用*{box-sizing: border-box}将更新。希望对你有所帮助。请检查该片段。由于CSS3 box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。

body { 
 
\t margin: 0; 
 
\t font-size: 13px; 
 
\t color: #222; 
 
\t background-color: #f5f5f5; 
 
} 
 

 
* { 
 
    box-sizing:border-box; 
 
} 
 

 
.text-right{ 
 
\t text-align: right; 
 
} 
 
/*-------------------------------------------------------------- 
 
style: 
 
--------------------------------------------------------------*/ 
 
.login-wrapper{ 
 
\t display:grid; 
 
    grid-template-columns:1fr; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
} 
 

 
.content{ 
 
\t display:grid; 
 
    grid-template-columns:1fr; 
 
    border:1px solid red; 
 
} 
 

 
.panel { 
 
    background-color: #fff; 
 
    border: 1px solid #dbd9d9; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
 
} 
 
.panel-body { 
 
    padding: 15px; 
 
} 
 
.panel-heading { 
 
    text-align: center; 
 
    padding: 5px 10px; 
 
    border-top-left-radius: 3px; 
 
    border-top-right-radius: 3px; 
 
} 
 
.panel-title { 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    color: inherit; 
 
} 
 
.panel-footer { 
 
    padding: 10px 15px; 
 
    background-color: #fff; 
 
    border-top: 1px solid #dbd9d9; 
 
} 
 

 
/*-------------------------------------------------------------- 
 
Form: 
 
--------------------------------------------------------------*/ 
 
.form-control { 
 
    display: block; 
 
    width: 100%; 
 
    height: 34px; 
 
    padding: 6px 12px; 
 
    line-height: 1.42857143; 
 
    color: #555; 
 
    background-color: #fff; 
 
    background-image: none; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
} 
 
.form-control:focus { 
 
    outline: 0; 
 
} 
 
.form-control::-moz-placeholder { 
 
    color: #999; 
 
    opacity: 1; 
 
} 
 
.form-control:-ms-input-placeholder { 
 
    color: #999; 
 
} 
 
.form-control::-webkit-input-placeholder { 
 
    color: #999; 
 
} 
 
.form-control::-ms-expand { 
 
    background-color: transparent; 
 
    border: 0; 
 
} 
 
.input-sm { 
 
    height: 29px; 
 
    padding: 5px 10px; 
 
    font-size: 12px; 
 
    line-height: 1.5; 
 
    border-radius: 3px; 
 
} 
 
.has-feedback { 
 
    position: relative; 
 
} 
 
.has-feedback .form-control { 
 
    padding-right: 42.5px; 
 
} 
 
.form-control-feedback { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    z-index: 2; 
 
    display: block; 
 
    width: 34px; 
 
    height: 34px; 
 
    line-height: 34px; 
 
    text-align: center; 
 
    pointer-events: none; 
 
} 
 
.has-error .help-block, 
 
.has-error .control-label, 
 
.has-error .radio, 
 
.has-error .checkbox, 
 
.has-error .radio-inline, 
 
.has-error .checkbox-inline, 
 
.has-error.radio label, 
 
.has-error.checkbox label, 
 
.has-error.radio-inline label, 
 
.has-error.checkbox-inline label { 
 
    color: #f44336; 
 
} 
 
.has-error .form-control { 
 
    border-color: #f44336; 
 
} 
 
.has-error .form-control:focus { 
 
    border-color: #f44336; 
 
} 
 
.has-error .input-group-addon { 
 
    color: #f44336; 
 
    background-color: #f2dede; 
 
    border-color: #f44336; 
 
} 
 
.has-error .form-control-feedback { 
 
    color: #f44336; 
 
} 
 
.has-feedback label ~ .form-control-feedback { 
 
    top: 25px; 
 
} 
 
.has-feedback label.sr-only ~ .form-control-feedback { 
 
    top: 0; 
 
} 
 

 
.input-group { 
 
    position: relative; 
 
    display: table; 
 
    border-collapse: separate; 
 
} 
 

 
.input-group .form-control { 
 
    position: relative; 
 
    z-index: 2; 
 
    float: left; 
 
    width: 100%; 
 
    margin-bottom: 0; 
 
} 
 
.input-group .form-control:focus { 
 
    z-index: 3; 
 
} 
 

 
.input-group-addon, 
 
.input-group-btn, 
 
.input-group .form-control { 
 
    display: table-cell; 
 
} 
 

 
.input-group-addon, 
 
.input-group-btn { 
 
    width: 1%; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
} 
 
.input-group-addon { 
 
    padding: 6px 12px; 
 
    font-weight: normal; 
 
    line-height: 1; 
 
    color: #555; 
 
    text-align: center; 
 
    background-color: #fff; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
} 
 
.input-group-addon.input-sm { 
 
    padding: 5px 10px; 
 
    font-size: 12px; 
 
    border-radius: 3px; 
 
} 
 
.input-group-addon.input-lg { 
 
    padding: 10px 16px; 
 
    font-size: 18px; 
 
    border-radius: 6px; 
 
} 
 
.input-group-addon input[type="radio"], 
 
.input-group-addon input[type="checkbox"] { 
 
    margin-top: 0; 
 
} 
 
.input-group .form-control:first-child, 
 
.input-group-addon:first-child, 
 
.input-group-btn:first-child > .btn, 
 
.input-group-btn:first-child > .btn-group > .btn, 
 
.input-group-btn:first-child > .dropdown-toggle, 
 
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), 
 
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { 
 
    border-top-right-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
} 
 
.input-group-addon:first-child { 
 
    border-right: 0; 
 
} 
 
.input-group .form-control:last-child, 
 
.input-group-addon:last-child, 
 
.input-group-btn:last-child > .btn, 
 
.input-group-btn:last-child > .btn-group > .btn, 
 
.input-group-btn:last-child > .dropdown-toggle, 
 
.input-group-btn:first-child > .btn:not(:first-child), 
 
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { 
 
    border-top-left-radius: 0; 
 
    border-bottom-left-radius: 0; 
 
} 
 
.input-group-addon:last-child { 
 
    border-left: 0; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    max-width: 100%; 
 
    font-size: 13px; 
 
    margin-bottom: 5px; 
 
} 
 
input:focus{ 
 
    outline:none!important; 
 
} 
 
.form-control-feedback i{ 
 
    margin-top: -5px; 
 
} 
 
.form-group{ 
 
    margin-bottom: 10px; 
 
} 
 

 

 

 

 

 

 
.footer-section{ 
 
\t background-color: #e9ecef; 
 
\t display: grid; 
 
\t border-top: 1px solid #d8dadd; 
 
\t grid-template-columns:1fr; 
 
\t font-size: 11px; 
 
\t text-align: center; 
 
} 
 

 
/* ========================================================================== 
 
    Button Scripts 
 
    ========================================================================== */ 
 
.btn{ 
 
    display: inline-block; 
 
    margin-bottom: 0; 
 
    font-weight: 400; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    touch-action: manipulation; 
 
    cursor: pointer; 
 
    border: 1px solid transparent; 
 
    white-space: nowrap; 
 
    padding: 3px 10px; 
 
    line-height: 1.5384616; 
 
    border-radius: 3px; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none 
 
} 
 
.btn:focus{ 
 
    outline: none; 
 
} 
 

 
.btndrk-orange{ 
 
\t background-color: #ec8b02; 
 
\t color:#fff; 
 
}

<div class="login-wrapper"> 
 
\t \t 
 

 
\t \t \t <div class="content"> 
 
\t \t \t \t \t <div class="panel"> 
 

 
\t \t \t \t \t \t <div class="panel-body"> 
 
\t \t \t \t \t \t  <div class="form-group"> 
 
         <div class="input-group"> 
 
          <span class="input-group-addon"><i class="icon-user-tie"></i></span> 
 
          <input type="text" class="form-control" name="username" id="username" autocomplete="off" placeholder="Username"> 
 
         </div> 
 
        </div> 
 
        <div class="form-group"> 
 
         <div class="input-group"> 
 
          <span class="input-group-addon"><i class="icon-lock2"></i></span> 
 
          <input type="password" class="form-control" name="password" id="password" autocomplete="off" placeholder="Password"> 
 
         </div> 
 
       </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="panel-footer text-right"> 
 
\t \t \t \t \t \t \t <button type="button" class="btn">LOGIN</button> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 2

使用显示器挠性不是在你的输入组显示表。