Question

我正在编写一个PhoneGap应用程序，并使用Twitter的Bootstrap进行响应式设计。

说校园/帐户/部门的框是选择框。我认为显而易见的问题是选择框是如何小的，当我在css中尝试使用时，它是不可更改的：

select{ height: 30px; /** OR */ lineheight: 30px; }

选择框的问题截图：

enter image description here

这是我的html文件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome-ie7.min.css" />
<link rel="stylesheet" type="text/css" href="css/template.css" />
<link rel="stylesheet" type="text/css" href="css/precode.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" />
<title>P-Card Mobile</title>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav pull-left">
                    <li id="titleLogo"><i id="back" class="icon-white icon-angle-left"></i><img src="img/lcbug.png"></img></li>
                    <li id="titleText"><h4>Blackbriar</h4></li>
                </ul>
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li class="dropDown"><a href="main.html">Home <i class="icon-white icon-home"></i></a></li>
                        <li class="dropDown"><a href="transactions.html">Transactions <i class="icon-white icon-credit-card"></i></a></li>
                        <li class="dropDown"><a href="settings.html">Settings <i class="icon-white icon-cog"></i></a></li>
                        <li class="dropDown"><a id="logoutBtn" href="index.html">Logout <i class="icon-white icon-off"></i></a></li>                        
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row-fluid">
            <div id="templates">
                <ul id="templateUl" class="nav nav-pills">
                    <li class="templi">
                        <a class="pill">
                            <text class="temp">Walmart</text>
                        </a>
                    </li>
                </ul>
            </div>
            <div id="templateEdit" class="span9">
                <form id="codingForm" method="post">
                    <input id="templateName" type="text" class="tallerInput" placeholder="Template Name" required>
                    <input id="descriptionField" type="text" class="tallerInput" placeholder="Description" required>
                    <select id="campusField" required>
                        <option value="">Campus</option>
                    </select>
                    <select id="accountField" required>
                        <option value="">Account</option>
                    </select>
                    <select id="departmentField" required>
                        <option>Deptartment</option>
                    </select>
                    <input id="programNameField" type="text" class="tallerInput" placeholder="Program Name">
                    <input id="projectIdField" type="text" class="tallerInput" placeholder="Project ID">
                    <input id="taskIdField" type="text" class="tallerInput" placeholder="Task ID">
                    <br>
                    <button id="saveBtn" class="btn btn-large btn-primary">Save</button>
                </form>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/commonFunctions.js"></script>
    <script type="text/javascript" src="js/template.js"></script>
    <script type="text/javascript" src="js/precodeFunctions.js"></script>
    <script type="text/javascript" src="js/precode.js"></script>
</body>
</html>

Answer 1

更新样式如下：

select.custom { min-height: 30px; /** OR */ line-height: 30px; }

更改您的选择标记html，如下所示：

<select id="accountField" class="custom" required>
    <option value="">Account</option>
</select>

选择Box太小，无法调整大小

1 个答案: