Bootstrap表单控件的大小和状态_bootstrap label 大小-CSDN博客

本文链接：https://blog.csdn.net/chengqiuming/article/details/86563708

一表单控件大小

1 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件大小</title>
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">-->
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
</head>
<body>
<h1>案例1</h1>
<form role="form">
    <div class="form-group">
        <label class="control-label">控件变大</label>
        <input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
    </div>
    <div class="form-group">
        <label class="control-label">正常大小</label>
        <input class="form-control" type="text" placeholder="正常大小">
    </div>
    <div class="form-group">
        <label class="control-label">控件变小</label>
        <input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">
    </div>
</form>



<h1>案例2</h1>
<form role="form" class="form-horizontal">
    <div class="form-group">
        <div class="col-xs-4">
            <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
        </div>
        <div class="col-xs-4">
            <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
        </div>
        <div class="col-xs-4">
            <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
        </div>
    </div>
    <div class="form-group&#