Bootstrap：删除表单字段边框

Question

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

为了好奇，我想要这个的原因是，我想先向用户显示他拥有的数据，然后根据表单是否处于“编辑”模式切换显示边框。用户可以通过点击“编辑”链接进入“编辑”模式，或者只需开始编辑一个字段。

Answer 1

在该示例中，删除边框简单的写：

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