Jquery 对Bootstrap 3输入字段使用高度自动
我发现拥有可编辑输入字段的唯一方法是在其上包含height auto类 由于不包含此类,我无法在输入字段中输入任何输入 “高度自动”使输入字段的大小基本上增加了一倍,就好像我没有输入一样,看起来有点笨拙 如果我需要包含此类以使字段可编辑,那么可以;否则,是否有人可以告诉我如何在不使用此类的情况下使字段可编辑 请注意,下表中的第一个字段是“高度自动”类。其余的都不是。 编辑2-相关的CSS代码 下面是我没有创建的CSS代码。我相信问题就在这里的某个地方。如果有人能告诉我可能在哪里,请告诉我。非常感谢Jquery 对Bootstrap 3输入字段使用高度自动,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,我发现拥有可编辑输入字段的唯一方法是在其上包含height auto类 由于不包含此类,我无法在输入字段中输入任何输入 “高度自动”使输入字段的大小基本上增加了一倍,就好像我没有输入一样,看起来有点笨拙 如果我需要包含此类以使字段可编辑,那么可以;否则,是否有人可以告诉我如何在不使用此类的情况下使字段可编辑 请注意,下表中的第一个字段是“高度自动”类。其余的都不是。 编辑2-相关的CSS代码 下面是我没有创建的CSS代码。我相信问题就在这里的某个地方。如果有人能告诉我可能在哪里,请告诉我。非常
.form-control {
display: block;
width: 100%;
height: 31px;
padding: 6px 12px;
font-size: 11px;
line-height: 1.428571429;
color: #686868;
background-color: #ffffff;
background-image: none;
border: 1px solid #bfbfbf;
border-radius: 2px;
-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;
}
.form-control:focus {
border-color: #dc3836;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(220, 56, 54, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(220, 56, 54, 0.6);
}
.form-control::-moz-placeholder {
color: #777777;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #777777;
}
.form-control::-webkit-input-placeholder {
color: #777777;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eaeaea;
opacity: 1;
}
textarea.form-control {
height: auto;
}
input[type="search"] {
-webkit-appearance: none;
}
input[type="date"] {
line-height: 31px;
}
.form-group {
margin-bottom: 15px;
}
.radio,
.checkbox {
display: block;
min-height: 15px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
}
.radio label,
.checkbox label {
display: inline;
font-weight: normal;
cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px;
}
.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
.radio[disabled],
.radio-inline[disabled],
.checkbox[disabled],
.checkbox-inline[disabled],
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"],
fieldset[disabled] .radio,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox,
fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}
.input-sm {
height: 27px;
padding: 5px 10px;
font-size: 10px;
line-height: 1.5;
border-radius: 2px;
}
select.input-sm {
height: 27px;
line-height: 27px;
}
textarea.input-sm,
select[multiple].input-sm {
height: auto;
}
.input-lg {
height: 41px;
padding: 10px 16px;
font-size: 14px;
line-height: 1.33;
border-radius: 6px;
}
select.input-lg {
height: 41px;
line-height: 41px;
}
textarea.input-lg,
select[multiple].input-lg {
height: auto;
}
.has-feedback {
position: relative;
}
.has-feedback .form-control {
padding-right: 38.75px;
}
.has-feedback .form-control-feedback {
position: absolute;
top: 20px;
right: 0;
display: block;
width: 31px;
height: 31px;
line-height: 31px;
text-align: center;
}
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline {
color: #468847;
}
.has-success .form-control {
border-color: #468847;
-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);
}
.has-success .form-control:focus {
border-color: #356635;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
}
.has-success .input-group-addon {
color: #468847;
border-color: #468847;
background-color: #dff0d8;
}
.has-success .form-control-feedback {
color: #468847;
}
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline {
color: #c09853;
}
.has-warning .form-control {
border-color: #c09853;
-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);
}
.has-warning .form-control:focus {
border-color: #a47e3c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}
.has-warning .input-group-addon {
color: #c09853;
border-color: #c09853;
background-color: #fcf8e3;
}
.has-warning .form-control-feedback {
color: #c09853;
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
color: #b94a48;
}
.has-error .form-control {
border-color: #b94a48;
-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);
}
.has-error .form-control:focus {
border-color: #953b39;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}
.has-error .input-group-addon {
color: #b94a48;
border-color: #b94a48;
background-color: #f2dede;
}
.has-error .form-control-feedback {
color: #b94a48;
}
.form-control-static {
margin-bottom: 0;
}
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #848484;
}
@media (min-width: 768px) {
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.form-inline .input-group > .form-control {
width: 100%;
}
.form-inline .control-label {
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .radio,
.form-inline .checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
vertical-align: middle;
}
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: none;
margin-left: 0;
}
.form-inline .has-feedback .form-control-feedback {
top: 0;
}
}
.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
margin-top: 0;
margin-bottom: 0;
padding-top: 7px;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
min-height: 22px;
}
.form-horizontal .form-group {
margin-left: -6px;
margin-right: 0px;
}
.form-horizontal .form-control-static {
padding-top: 7px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
}
}
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: 10px;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 11px;
line-height: 1.428571429;
/*border-radius: 4px;*/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus {
color: #333333;
text-decoration: none;
}
.btn:active,
.btn.active {
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
cursor: not-allowed;
pointer-events: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-default {
color: #333333;
background-color: #e4e4e4;
border-color: #bfbfbf;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
color: #333333;
background-color: #cfcfcf;
border-color: #a1a1a1;
}
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
background-color: #e4e4e4;
border-color: #bfbfbf;
}
.btn-default .badge {
color: #e4e4e4;
background-color: #333333;
}
.btn-primary {
color: #ffffff;
background-color: #c31318;
border-color: #ac1115;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
color: #ffffff;
background-color: #9e0f13;
border-color: #740b0e;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
background-color: #c31318;
border-color: #ac1115;
}
.btn-primary .badge {
color: #c31318;
background-color: #ffffff;
}
.btn-success {
color: #ffffff;
background-color: #5cb85c;
/*border-color: #4cae4c;*/
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
color: #ffffff;
background-color: #47a447;
border-color: #398439;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-success .badge {
color: #5cb85c;
background-color: #ffffff;
}
.btn-info {
color: #ffffff;
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
color: #ffffff;
background-color: #39b3d7;
border-color: #269abc;
}
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
background-image: none;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
background-color: #5bc0de;
border-color: #46b8da;
}
.btn-info .badge {
color: #5bc0de;
background-color: #ffffff;
}
.btn-warning {
color: #ffffff;
background-color: #f0ad4e;
border-color: #eea236;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
color: #ffffff;
background-color: #ed9c28;
border-color: #d58512;
}
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
background-image: none;
}
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
background-color: #f0ad4e;
border-color: #eea236;
}
.btn-warning .badge {
color: #f0ad4e;
background-color: #ffffff;
}
.btn-danger {
color: #ffffff;
background-color: #f0302d;
border-color: #ee1915;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
color: #ffffff;
background-color: #e41410;
border-color: #b9100d;
}
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
background-image: none;
}
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
background-color: #f0302d;
border-color: #ee1915;
}
.btn-danger .badge {
color: #f0302d;
background-color: #ffffff;
}
.btn-link {
color: #c31318;
font-weight: normal;
cursor: pointer;
border-radius: 0;
}
.btn-link,
.btn-link:active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
border-color: transparent;
}
.btn-link:hover,
.btn-link:focus {
color: #7d0c0f;
text-decoration: underline;
background-color: transparent;
}
.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus {
color: #777777;
text-decoration: none;
}
.btn-lg,
.btn-group-lg > .btn {
padding: 10px 16px;
font-size: 14px;
line-height: 1.33;
border-radius: 6px;
}
.btn-sm,
.btn-group-sm > .btn {
padding: 5px 10px;
font-size: 10px;
line-height: 1.5;
border-radius: 2px;
}
.btn-xs,
.btn-group-xs > .btn {
padding: 1px 5px;
font-size: 10px;
line-height: 1.5;
border-radius: 2px;
}
.btn-block {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.btn-block + .btn-block {
margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
width: 100%;
}
编辑
下面是一些HTML代码
<div class="form-group">
<label class="col-sm-2 control-label" for="txtJournalVoucherJVNumber">Journal Voucher #:</label>
<div class="col-sm-2">
<input type="text" class="form-control height-auto" id="txtJournalVoucherJVNumber" />
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="txtJournalVoucherTotalDebitFrom">Total Debit From:</label>
<div class="controls form-inline">
<input class="input-small" id="txtJournalVoucherTotalDebitFrom" placeholder="From Date" type="text" />
<label for="txtJournalVoucherTotalDebitTo">To:</label>
<input class="input-small" id="txtJournalVoucherTotalDebitTo" placeholder="To Date" type="text" />
</div>
</div>
</div>
发现另一个css文件导致了其他插件的问题。一旦我把它注释掉,它就工作得很好。你能给我们看看你的代码吗,因为这不是输入字段的正常行为。您的代码中一定有什么原因导致了这种情况。听起来您有一些javascript绑定到该类,因此您可能必须使用其他类覆盖该类CSS。请出示一些代码。