CSS Bootstrap 移除面板轮廓
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20701102/
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 panel outline
提问by kacpr
I'm having difficulties with two things in Bootstrap 3:
我在 Bootstrap 3 中遇到了两件事：
I would like to remove the outline of the Panel object - the blue line around the whole thing
Inside the panel I have placed a table, I would love to remove lines separating the rows, but only in the table head. (that header is the area with the darker gray background)
我想删除 Panel 对象的轮廓 - 整个事物周围的蓝线
在面板内我放置了一张桌子，我想删除分隔行的线条，但仅限于表头。（该标题是具有较深灰色背景的区域）
Are these two things even possible?
这两件事甚至可能吗？
Please have a look
请看一看
<div class="panel panel-primary" id="panel" style="display: block;">
<div class="panel-heading" id="heading">1387537097625.xls</div>
<div id="table">
<table id="changes" class="table table-striped table-condensed">
<thead style="font-weight: bold; background-color: rgb(192, 192, 192);">
<tr>
<td>Price List Name</td>
<td style="font-weight: normal;">Price list</td>
<td></td>
<td colspan="2"></td>
<td colspan="3"></td>
</tr>
<tr>
<td>Currency</td>
<td style="font-weight: normal;">EUR</td>
<td></td>
<td colspan="2">Existing price breaks</td>
<td colspan="3">New price breaks</td>
</tr>
<tr>
<td>Product Range</td>
<td>Product Description</td>
<td>Productid(s)</td>
<td>1+</td>
<td>500+</td>
<td>1+</td>
<td>250+</td>
<td>1000+</td>
</tr>
</thead>
<tbody>
<tr>
<td>Range</td>
<td>Some description here</td>
<td>559</td>
<td class="warning">17.6</td>
<td></td>
<td class="warning">17.6</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Another Range</td>
<td>Different description here</td>
<td>506</td>
<td class="warning">23.15</td>
<td></td>
<td class="warning">23.15</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
回答by mMoovs
It's possible and pretty easy.
这是可能的，而且很容易。
It's all in the bootstrap stylesheet and you can make your own style changes to anything there is. Rather than just writing over the lines in the bootstrap.css, I'd recommend creating your own CSS file and add it to your page after the bootstrap.css. That way your styles are loaded last and affect to the elements. And in case there's something wrong in your CSS the styles come from the bootstrap.css.
这一切都在引导样式表中，您可以对任何样式进行自己的样式更改。与其只是写在 bootstrap.css 中的行，我建议创建您自己的 CSS 文件并将其添加到您的页面 bootstrap.css 之后。这样你的样式最后加载并影响元素。如果你的 CSS 有问题，样式来自 bootstrap.css。
So add the files like:
所以添加如下文件：
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="yourStyles.css" type="text/css" rel="stylesheet">
And the style definitions you need to do to yourStyles.css are:
您需要对 yourStyles.css 进行的样式定义是：
.panel {
border: 0;
}
.table > thead > tr > th, .table > thead > tr > td {
border: 0;
}
The .panel removes the border around the whole panel and the latter removes the border-bottom which the table headings have.
.panel 删除整个面板周围的边框，后者删除表格标题所具有的边框底部。
Here's a Fiddle: http://jsfiddle.net/pUb6s/1/
这是一个小提琴：http: //jsfiddle.net/pUb6s/1/
For the future, you can find the styles effecting to some element by using some browser developer tool. Ie. if you're using Firefox just right click the element and select Inspect Element, it shows the HTML and CSS.
将来，您可以使用一些浏览器开发人员工具找到对某些元素产生影响的样式。IE。如果您使用 Firefox，只需右键单击该元素并选择“检查元素”，它就会显示 HTML 和 CSS。
回答by imwilsonxu
.panel-borderless {
border: 0;
box-shadow: none;
}
回答by Renju Jose
AFAIK using a panel-borderlessclass is the most accurate and sufficient way for getting a panel without a border. Tried and tested.
AFAIK 使用panel-borderless类是获得无边框面板的最准确和最充分的方法。尝试和测试。
回答by Andre
you can just do this it worked for me (css at top of your page(copy and paste and it will work))
你可以这样做它对我有用（页面顶部的css（复制和粘贴它会起作用））
<style>
.panel {
border: 0;
}
.table > thead > tr > th, .table > thead > tr > td {
border: 0;
}
</style>
