Html Bootstrap 文本输入高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30729892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 11:37:19 来源:igfitidea点击:
Bootstrap text input height
提问by user3485417
I am trying to increase the text input height inside a form on a site I am programming. I try to override the default bootstrap css of 20px height but nothing seems to be changing. Here is my code--
我正在尝试增加我正在编程的站点上表单内的文本输入高度。我尝试覆盖 20px 高度的默认引导 css，但似乎没有任何变化。这是我的代码--
css
css
.inputfield
{
position:relative;
top:30px;
font-size: 60px!important;
font-family:'Lato', sans-serif !important;
font-weight: 400;
color:white ;
width:400px;
line-height: 100px!important;
opacity:0.2;
}
and
和
the form HTML
表单 HTML
<form class="text-center" action="" method="post">
<div class="row">
<input type="text" id="username" name="name" class="inputfield" placeholder="Username"><br><br>
</div>
<input id="password" type="password" name="password" class="inputfield" placeholder="Password"><br><br>
<br>
<input type="submit" id="submit" value="Login" /><br>
</form>
please help
请帮忙
回答by Masud Shrabon
You can use css heightattribute both as inline css :
您可以将 css height属性用作内联 css ：
<input style="height:50px"/>
or class
或班级
<input class="inputfield"/>
and THE CSS
和 CSS
.inputfield{
height:50px
}
回答by Kenzo-kun
Based from the code you gave, you are not using bootstrap so I will just assume that this is what you are trying to achieve. https://jsfiddle.net/127c14bu/
根据您提供的代码，您没有使用引导程序，因此我假设这就是您要实现的目标。https://jsfiddle.net/127c14bu/
If you want to override the height, you can add another css class on your input text that contains the desired height. See the .overrideheightand change the value of height.
如果要覆盖高度，可以在包含所需高度的输入文本上添加另一个 css 类。查看.overrideheight并更改 的值height。
I hope it helps.
我希望它有帮助。
回答by user3485417
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="/demo/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-responsive.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
<style >
*{
margin:0 !important;
padding:0 ! important;
}
body {
width: 100%;
min-height: 800px;
background-size: 100%;
background-repeat: no-repeat;
position:absolute;
background-image: url(demo_BG_1024.png);
background-color: rgb(0,0,0);
}
ul{
padding-top: 0px;
}
.form-signin {
width:500px !important;
height:300px ! important;
}
.form-signin {
max-width: 500px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
.left {
float: left;
display: block;
width: 25%;
padding-left: 0px;
text-align: left;
}
.right {
float: right;
display: block;
width: 75%;
text-align: right;
padding-right: 0px;
}
.header
{
font-family: 'Lato', sans-serif;
font-weight: 700;
color: white;
font-size: 64px;
padding-top: 60px;
}
.header2
{
padding-top: 0px;
font-family: 'Lato', sans-serif;
font-weight: 300;
color: white;
font-size: 46px;
}
.header3
{
padding-top: 0px;
font-family: 'Lato', sans-serif;
font-weight: 300;
color: white;
font-size: 30px;
}
.header4
{
padding-top: 0px;
font-family: 'Lato', sans-serif;
font-weight: 300;
color: white;
font-size: 18px;
}
nav{
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
width: 100%;
height: 78px;
padding:0 px;
background-color: rgb(0,0,0);
}
ul li {
list-style-type: none;
margin: 0px;
display: inline-block;
}
#logo_image
{
padding: 10px 30px!important;
}
.menu_buttons
{
font-family:'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
color:white ;
display: inline-block;
padding: 10px 30px !important;
}
.demobtn {
height:1.3em;
width:2.5em;
background-color:#00b6ee;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:'Lato', sans-serif;
font-weight: 300;
font-size:30px;
padding:10px 100px;
text-decoration:none;
text-shadow:0px 0px 0px #2f6627;
}
.demobtn:hover {
`enter code here`background-color:#00b6ee;
text-decoration:none;
}
.demobtn:active {
position:relative;
text-decoration:none;
top:1px;
}
.inputfield
{
position:relative;
top:30px;
font-size: 60px!important;
font-family:'Lato', sans-serif !important;
font-weight: 400;
color:white ;
width:400px;
line-height: 100px!important;
opacity:0.2;
}
.overrideheight {
height: 90px;
}
.sign-in
{
padding-top: 100px;
margin-top:100px;
}
.myForm
{
position:relative;
top:230px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="row">
<nav>
<ul class="left" ><li id="logo_image"><img alt="logo" src="img/demo_logo.png"></li></ul>
<ul class="right" >
<li><a class="menu_buttons" href="#">Login</a></li>
</ul>
</nav>
</div>
<div class="row ">
<div class="myForm">
<div class="row sign-in ">
<div class="col-xs-6 col-md-4 col-lg-4"></div>
<div class="col-xs-6 col-md-4 col-lg-4 text-center"><h2 class="header2">Login to demo</h2></div>
<div class="col-xs-6 col-md-4 col-lg-4"></div>
</div>
<br>
</div>
</div>
<form class="text-center form-group" action="" method="post">
<div class="row">
<input type="text" id="username" name="name" class="form-control overrideheight" placeholder="Username"><br><br>
</div>
<input id="password" type="password" name="password" class="form-control overrideheight" placeholder="Password"><br><br>
<br>
<input type="submit" id="submit" value="Login" /><br>
</form>
<div class="navbar-fixed-bottom">
<ul class="left">
<li><a href="#" class="menu_buttons" >Home</a></li>
<li><a href="#" class="menu_buttons" >About</a></li>
<li><a href="#" class="menu_buttons" >Support</a></li>
</ul>
<ul class="right">
<li><a href="#" class="menu_buttons" >Powered by Demo</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#submit").attr("disabled",true);
var username = '';
$("#username").on('change keyup paste mouseup', function() {
if ($(this).val() != username) {
username = $(this).val();
}
});
var password = '';
$("#username").on('change keyup paste mouseup', function() {
if ($(this).val() != password) {
password = $(this).val();
if(username!=""&&password!="")
{
$("#submit").attr("disabled",false);
}
}
});
});
</script>
</body>
</html>
