Bootstrap:删除表单字段边框 [英] Bootstrap: Remove form field border

问题描述

我是 CSS 新手，我正在使用 Bootstrap，我想以两种方式使用表单:表单字段周围有或没有边框.我怎样才能做到最好?以下是我想删除边框的 Bootstrap 表单示例:plnkr.co/edit/xxx1Wy4kyCESNsChK4Ra?p=preview.

I am new to CSS and I am using Bootstrap and I want to use forms in 2 ways: With or without borders around the form fields. How can I achieve that best? Here is an example of a Bootstrap form I want to remove the borders for: plnkr.co/edit/xxx1Wy4kyCESNsChK4Ra?p=preview.

出于好奇，我想要这个的原因是我想首先向用户显示他拥有的数据，然后根据表单是否处于编辑"模式切换显示边框.用户可以通过单击编辑"链接或直接开始编辑字段来进入编辑"模式.

For curiosity, the reason I want this, is that I want to first show the user the data he has, and then toggle showing the borders according to if the form is in "edit" mode or not. The user can enter "edit" mode by clicking an "edit"-link or just start editing a field.

推荐答案

在那个例子中，删除边框只需写:

In that example, to remove the border simply write:

.form-control {
    border: 0;
}

在您的 CSS 文件中.

In your CSS file.

这将删除所有表单字段的边框，更灵活的方法是将类附加到您希望没有边框的表单字段，因此您的 HTML 将类似于:

This will remove borders from all your form fields though, a more flexible approach would be to attach a class to the form fields you want to have no border, so your HTML would be something like:

<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 */
}

这篇关于Bootstrap:删除表单字段边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！