javascript - 如何减少 Bootstrap 中输入文本字段的高度?

标签 javascript jquery html css twitter-bootstrap

如何降低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>

上面的代码给出以下输出:

enter image description here

在上图中,即使我使用 form-group form-group-sm,输入字段高度也很大。我需要进一步降低高度。

最佳答案

试试这个:

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

关于javascript - 如何减少 Bootstrap 中输入文本字段的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33411009/

相关文章:

javascript - PHP 联系表单中的多个字段

javascript - 如何在 jQuery 中获取单选按钮组的值?

javascript - 为什么 js 服务器收不到 HTTP post 请求?

javascript - 重定向或呈现事件的另一个 View

javascript - 如何更改输入的值以便在提交时传递?

jquery - 动态重新定位 div

html - Arcana 模板中的隐形复选框

javascript - 球被困在 Racket 内

javascript - Protractor :根据 html 属性选择元素的语法

javascript - 用js打开同一页面的链接