如何使用boostrap编写脚本表单select?

时间:2017-01-24 10:39:11

标签: html css twitter-bootstrap

使用boostrap创建表单时遇到问题。特别是选择。请帮忙:(

<div class="form-group">
    <label for="jenis_pendidikan" class="col-md-2 control-label">Jenis Pendidikan</label>

    <div class="col-md-6">
        <select id="jenis_pendidikan" class="form-control" name="jenis_pendidikan">
            <option>SD</option>
            <option>SMP</option>
            <option>SMA/SMK</option>
            <option>Perguruan Tinggi</option>
        </select>

    </div>
</div>

Source

结果:

Display

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"             href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">       </script>
 <link href="https://fonts.googleapis.com/css?family=Catamaran:100|Luckiest+Guy|Quicksand:300|Asap:700|Montserrat:700|Open+Sans|Roboto|Signika:700" rel="stylesheet"/>
</head>
<body>
<div class="form-group">
                       

                        <div class="col-md-6">
                          <label for="jenis_pendidikan">Jenis Pendidikan</label>
                                <select  id="jenis_pendidikan" class="form-control" name="jenis_pendidikan">
                                    <option>SD</option>
                                    <option>SMP</option>
                                    <option>SMA/SMK</option>
                                    <option>Perguruan Tinggi</option>
                                </select>

                        </div>
                    </div>
</body>
</html>

看一下它上面的代码片段。

您需要将label放在select上方。

希望这有帮助!