用户投稿ㄧ.Forms:文本框的变化与附加显示
<body data-spy="scroll" data-target="#nav-demo"> <div class="component" id="demo" style="height: 300vh"> <input type="text" class="form-control-sm" placeholder="输入..."> <input type="text" class="form-control" readonly placeholder="输入..."> <input type="text" class="form-control-plaintext" placeholder="输入..."> <div class="input-group"> <span class="input-group-text">@</span> <input type="text" class="form-control" placeholder="输入..."> <span class="input-group-prepend"> <button class="btn btn-primary">Go</button> </span> </div> </div></body>.demo.component{ padding: 50px;}重点：
.form-control-sm小尺寸，.form-control-lg大尺寸
readonly为仅能阅读
如果您希望将 元素设置为纯文本，请使用 .form-control-plaintext 来删除预设表单纯文字样式，并保留适当的边距和填充。
.input-group为input群组，父元素为.input-group
@为span.input-group-text
再来就是input type="text"
第三个为按钮，基本的样式与对齐的span.input-group-prepend
codepen
参考：bootstrap4
微信扫一扫打赏
支付宝扫一扫打赏
