如何减少引导程序中输入文本字段的高度？
[英]How to decrease the height of the input text field in bootstrap?
问题描述
How to decrease the height of the input text field in bootstrap? 
如何减少引导程序中输入文本字段的高度？ My code: 我的代码：
Head section: 头部：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/defaultStyles.css">
<link rel="stylesheet" type="text/css" href="css/myMenuStyle.css">
<link rel="stylesheet" type="text/css"
href="css/FiexedHeaderTableScrollingStyle.css">
<style type="text/css">
.form-group {
margin-bottom: 0px ;
margin-top: 0px; <!-- I used this style to decrease space between fields -->
}
</style>
</head>
Actual form code: 实际的表单代码：
<form class="form-horizontal" action="addKPITODB">
<div class="form-group form-group-sm">
<label for="kpi_name" class="col-sm-2 control-label">KPI Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="kpi_name"
placeholder="KPI Name" name="kpi_name">
</div>
</div>
<div class="form-group form-group-sm">
<label for="kpi_sql" class="col-sm-2 control-label">KPI SQL</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="K sql"
name="kpi_sql" id="kpi_sql">
</div>
</div>
</form>
The above code gives the following output: 上面的代码提供以下输出：
In the above image, the input field height is big even I am using form-group form-group-sm . 在上图中，即使我正在使用form-group form-group-sm ，输入字段的高度也很大。 I need to decrease the height further. 我需要进一步降低高度。
2 个解决方案
解决方案1
1 已采纳 2015-10-29 10:04:05
Try this: 尝试这个：
input.form-control {
height:25px !important;
}
解决方案2
0 2015-10-29 10:03:26
.form-control class in bootstrap is set to have height: 34px you can set it to anything you like using: 引导程序中的.form-control类设置为具有height: 34px ，可以将其设置为您喜欢的任何值：
.form-control {
height: 30px;
}
for example, if it is not working that means that your stylesheet file is being loaded BEFORE bootstrap.css file, so either add !important to your CSS rule or load your stylesheet AFTER the bootstrap.css file which is the preferred way. 例如，如果它不起作用，则意味着正在bootstrap.css文件之前加载样式表文件，因此可以在CSS规则中添加!important或在bootstrap.css文件之后加载样式表（这是首选方法）。
Here is an example: 这是一个例子：
.form-control { height: 100px; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css"></link> <form class="form-horizontal" action="addKPITODB"> <div class="form-group form-group-sm"> <label for="kpi_name" class="col-sm-2 control-label">KPI Name</label> <div class="col-sm-5"> <input type="text" class="form-control" id="kpi_name" placeholder="KPI Name" name="kpi_name"> </div> </div> <div class="form-group form-group-sm"> <label for="kpi_sql" class="col-sm-2 control-label">KPI SQL</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="K sql" name="kpi_sql" id="kpi_sql"> </div> </div></form>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.