Bootstrap：删除表单域边框

qqrboqgw 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(4)|浏览(227)

我是CSS新手，我正在使用Bootstrap，我想以2种方式使用表单：表单字段周围有或没有边框。如何才能达到最佳效果？下面是一个要删除边框的 Bootstrap 表单的示例：plnkr.co/edit/xxx1Wy4kyCESNsChK4Ra?p=preview。
出于好奇，我想要这样做的原因是，我想首先向用户显示他所拥有的数据，然后根据表单是否处于“编辑”模式来切换边框的显示。用户可以通过单击“编辑”链接进入“编辑”模式，或者只是开始编辑一个字段。

twitter-bootstrap

来源：https://stackoverflow.com/questions/26033426/bootstrap-remove-form-field-border

4条答案

按热度按时间

m2xkgtsf1#

我直接去“投入”了。

input {
    border: 0;
}

<input type="text" name="name" class="form-control" placeholder="Name">

这将删除表单输入的所有边框。

赞(0）回复(0）举报 2022-12-07

wgx48brx2#

在该示例中，要删除边框，只需写入：

.form-control {
    border: 0;
}

在CSS文件中。
这将删除所有表单字段的边框，但更灵活的方法是将一个类附加到您希望没有边框的表单字段，因此您的HTML将类似于：

<input type="email" class="form-control no-border" id="inputEmail3" placeholder="Email">

和CSS：

.no-border {
    border: 0;
    box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}

赞(0）回复(0）举报 2022-12-07

z31licg03#

在Bootstrap 4中，您可以将border-0类添加到元素中以删除其边框。
可以使用-Bootstrap 4 Borders的其他类

<span class="border-0"></span>             /* remove all borders */
<span class="border-top-0"></span>         /* remove top border */
<span class="border-right-0"></span>       /* remove border on the right */
<span class="border-bottom-0"></span>      /* remove bottom border */
<span class="border-left-0"></span>        /* remove border on the left */

下面是一个工作示例，可以满足您的要求：
第一次

赞(0）回复(0）举报 2022-12-07

u1ehiz5o4#

来自Bootstrap v5.2的边界类。

<html>
<head>
<title>Page Title</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>

<input type="text" class="border-0" value="" placeholder="Enter value" />

</body>
</html>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap：删除表单域边框

4条答案

相关问题

热门标签

最新问答