bootstrap 响应式布局表单样式
2021-11-16 本文已影响0人
shine001
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例表单及col中文字剧中col重新分配宽度</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
.col-xs-9 {
width: 90%;
}
.col-xs-2 {
width: 10%;
}
</style>
</head>
<body>
<div style="width: 90%;margin: 0 auto;margin-top: 20px;">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-xs-2 control-label" style="white-space: nowrap;line-height: 35px;">姓名：</label>
<div class="col-xs-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-xs-2 control-label" style="white-space: nowrap;line-height: 35px;">密码：</label>
<div class="col-xs-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-xs-2 control-label" style="white-space: nowrap;line-height: 35px;">单选：</label>
<div class="col-xs-9">
<div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
</label><br>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 选项 2
</label>
</div>
</div>
</div>
<div class="form-group" style="width: 90%;margin: 0 auto;margin-top: 20px;">
<div class="col-xs-12">
<div class="form-group">
<label for="name">选择列表</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-xs-2 control-label" style="white-space: nowrap;line-height: 35px;">说明：</label>
<div class="col-xs-9">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
<div class="form-group" style="text-align: center;">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-info"> 提交表单信息</button>
</div>
</div>
</form>
</div>
</body>
</html>
