twitter-bootstrap Bootstrap：删除表单字段边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26033426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: Remove form field border
提问by EricC
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.
我是 CSS 新手，我正在使用 Bootstrap，我想以两种方式使用表单：表单字段周围有或没有边框。我怎样才能做到最好？这是我想删除边框的 Bootstrap 表单示例：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.
出于好奇，我想要这个的原因是我想首先向用户显示他拥有的数据，然后根据表单是否处于“编辑”模式切换显示边框。用户可以通过单击“编辑”链接或直接开始编辑字段来进入“编辑”模式。
回答by Jon Kyte
In that example, to remove the border simply write:
在该示例中，要删除边框只需编写：
.form-control {
border: 0;
}
In your CSS file.
在您的 CSS 文件中。
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:
这将删除所有表单字段的边框，但更灵活的方法是将类附加到您希望没有边框的表单字段，因此您的 HTML 将类似于：
<input type="email" class="form-control no-border" id="inputEmail3" placeholder="Email">
and your CSS:
和你的 CSS：
.no-border {
border: 0;
box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}
回答by Hooman Bahreini
In Bootstrap 4, you can add border-0class to your element to remove its border.
在 Bootstrap 4 中，您可以border-0向元素添加类以移除其边框。
Other classes that you can use - Bootstrap 4 Borders
您可以使用的其他类 - 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 */
And here is a working example for what you asked:
这是您询问的工作示例：
$("#myButton").click(function() {
$("#myInput").toggleClass('border-0')
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="myInput">
<input id="myButton" type="button" value="Toggle Border">
</form>回答by Alterfonico
I went straight to the "inputs".
我直接进入了“输入”。
input {
border: 0;
}<input type="text" name="name" class="form-control" placeholder="Name">
