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