我在下面有这个代码,我想使用引导程序类“.border”添加一个边框,使其像一个盒子,但我不知道为什么不起作用!。可以使用引导程序 v4 吗?
<div class="d-flex justify-content-center">
<form>
<div class="form-group row">
<div class="col-sm-12">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class=" col-sm-12">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
</div>
Run Code Online (Sandbox Code Playgroud)
是的,您可以在表单周围放置边框。您可以通过使用内联 CSS 来实现,如下所示:
<form style="border:1px solid black">
这是带有背景颜色的边框表单的一个很好的组合:
<form class = 'card p-3 bg-light'>
Run Code Online (Sandbox Code Playgroud)
看起来很适合我的情况。
是的你可以。
如果您使用内部样式表
<head>
<style>
.border-class
{
border:thin black solid;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="d-flex justify-content-center ">
<form class="border-class">
<div class="form-group row">
<div class="col-sm-12">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class=" col-sm-12">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
我知道这是一个很晚的回应,但我觉得有义务分享一种更“引导”的方式来做到这一点。只需使用类card和p-1作为内容和所述边框之间的边框和填充即可。
<form class = 'card p-1'>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
25410 次 |
| 最近记录: |