我可以使用 bootstrap 将边框添加到表单中吗?

Cat*_*ira 7 twitter-bootstrap

我在下面有这个代码,我想使用引导程序类“.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)

Nis*_*tap 7

是的,您可以在表单周围放置边框。您可以通过使用内联 CSS 来实现,如下所示:

<form style="border:1px solid black">

  • 你可以试试 **form-control** 类的 bootstrap。 (2认同)

Yas*_*ldi 6

这是带有背景颜色的边框表单的一个很好的组合:

<form class = 'card p-3 bg-light'>
Run Code Online (Sandbox Code Playgroud)

看起来很适合我的情况。


var*_*man 5

是的你可以。

如果您使用内部样式表

<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)


Maz*_*ion 5

我知道这是一个很晚的回应,但我觉得有义务分享一种更“引导”的方式来做到这一点。只需使用类cardp-1作为内容和所述边框之间的边框和填充即可。

<form class = 'card p-1'>
Run Code Online (Sandbox Code Playgroud)