Question

如何降低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，输入字段的高度也很大。我需要进一步降低高度。

Answer 1

试试这个：

input.form-control {
   height:25px !important;
}

Answer 2

bootstrap中的

.form-control类设置为height: 34px，您可以将其设置为您喜欢的任何内容：

.form-control {
   height: 30px;
}

例如，如果它不起作用意味着您的样式表文件正在加载 BEFORE bootstrap.css文件，那么要么将!important添加到CSS规则中，要么加载您的样式表 AFTER bootstrap.css文件是首选方式。

以下是一个例子：

＆＃13;

.form-control {
  height: 100px;
  }

＆＃13;

<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>

＆＃13;

如何降低bootstrap中输入文本字段的高度？

2 个答案: