Question

我在Bootstrap 3中遇到两件事有困难：

我想删除Panel对象的轮廓 - 整个事物的蓝线
在面板内我放了一张桌子，我很想删除分隔行的线条，但只能在桌面上。（标题是灰色背景较深的区域）

这两件事甚至可能吗？

请查看 enter image description here

<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>

Answer 1

这很可能也很容易。

这一切都在引导程序样式表中，您可以对自己的任何内容进行自己的样式更改。我建议您创建自己的CSS文件，然后在bootstrap.css之后将其添加到页面中，而不是仅仅在bootstrap.css中写入行。这样你的样式最后加载并影响元素。如果您的CSS出现问题，则样式来自bootstrap.css。

所以添加如下文件：

<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="yourStyles.css" type="text/css" rel="stylesheet">

您需要对yourStyles.css执行的样式定义是：

.panel {
    border: 0;
}

.table > thead > tr > th, .table > thead > tr > td {
    border: 0;
}

.panel删除整个面板周围的边框，后者删除表格标题所具有的边框底部。

这是一个小提琴：http://jsfiddle.net/pUb6s/1/

将来，您可以使用某些浏览器开发工具找到影响某些元素的样式。 IE浏览器。如果您正在使用Firefox，只需右键单击该元素并选择Inspect Element，它就会显示HTML和CSS。

Answer 2

.panel-borderless {
  border: 0;
  box-shadow: none;
}

Answer 3

使用panel-borderless类的AFAIK是获取没有边框的面板的最准确和充分的方法。经过试验和测试。

Answer 4

你可以这样做，它对我有效（在你的页面顶部的CSS（复制和粘贴，它将工作））

<style>
            .panel {
                border: 0;
            }

            .table > thead > tr > th, .table > thead > tr > td {
                border: 0;
            }

</style>

Bootstrap删除面板轮廓

4 个答案: