如何减少引导程序中输入文本字段的高度？
[英]How to decrease the height of the input text field in bootstrap?
问题描述
如何减少引导程序中输入文本字段的高度？ 我的代码：
头部：
<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>
实际的表单代码：
<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>
上面的代码提供以下输出：
在上图中，即使我正在使用form-group form-group-sm ，输入字段的高度也很大。 我需要进一步降低高度。
2 个解决方案
解决方案1
1 已采纳 2015-10-29 10:04:05
尝试这个：
input.form-control {
height:25px !important;
}
解决方案2
0 2015-10-29 10:03:26
引导程序中的.form-control类设置为具有height: 34px ，可以将其设置为您喜欢的任何值：
.form-control {
height: 30px;
}
例如，如果它不起作用，则意味着正在bootstrap.css文件之前加载样式表文件，因此可以在CSS规则中添加!important或在bootstrap.css文件之后加载样式表（这是首选方法）。
这是一个例子：
.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>
如何减少带有文本和图标的 HStack 的高度
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.