如何減少引導程序中輸入文本字段的高度？
[英]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.