Question

问题

我的面板之间有空格（用红色标出），我想摆脱它们。我试过了：

.panel {
    margin-top: 0; 
    margin-bottom: 0; 
    padding-top: 0; 
    padding-bottom:0;
}

但它没有用。

对于页面底部的空白区域，我尝试将包含container和#Menu设置为margin-bottom: 0，但这不起作用。

如果有人能让我知道如何摆脱间距，我会非常感激！

我的代码

HTML 的

<div class="panel-group" id="problem-panels">
                <div class="panel panel-default top-panel">
                    <div class="panel-heading" data-toggle="collapse" href="#collapse1">
                        <h4 class="panel-title">
                            Cox Substraction Level 1c
                        </h4> 
                    </div>
                    <div id="collapse1" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <ul class="nav nav-pills">
                                <li class="active"><a>11</a></li>
                                <li><a>12</a></li>
                                <li><a>13</a></li>
                                <li><a>14</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title" data-toggle="collapse" href="#collapse2">
                            Cox Addition Level 3b
                        </h4> 
                    </div>
                    <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">panel body 2</div>
                    </div>
                </div>
                <div class="panel panel-default bottom-panel">
                    <div class="panel-heading">
                        <h4 class="panel-title" data-toggle="collapse" href="#collapse3">
                            Cox Subtraction Level 2a
                        </h4> 
                    </div>
                    <div id="collapse3" class="panel-collapse collapse">
                        <div class="panel-body">panel body 3</div>
                    </div>
                </div>
            </div>

CSS

#problem-panels > .top-panel{
    border-top: none;
}

#problem-panels > .bottom-panel{
    border-bottom: none;
}

/*Get rid of grey border at top of panel body*/
.panel-group .panel-heading + .panel-collapse > .panel-body {
    border: none;
}

#problem-panels {
    margin-top: 20px;
}

.panel-title {
    font-weight: 600;
}

.panel-body{
    background-color: #F5F5F5;
}

JSFiddle

Answer 1

将此添加到您的CSS文件中。它应该删除额外的保证金。

.panel-group .panel + .panel {
    margin-top: 0;
}

此外，您还可以向面板添加一个类，以便您不会错误地更改任何其他面板

.my-panels{
    margin-top:0!important;
}

使用浏览器检查器查看哪些样式应用于哪些元素也是一个好主意。

快乐的编码！

Answer 2

您可以使用important标记覆盖其他规则。

.panel {
    margin: 0 !important; 
    padding:0 !important;
}

Answer 3

试试这个：

#problem-panels .panel-default {
    margin-top: 0;
}

Answer 4

您可以使用!important修饰符。

你的小提琴here

只是厌倦了它会修改你的所有.panel。

我建议您定义一个自定义类，并在需要进行此修改的地方使用它。

如何摆脱Bootstrap面板之间的间距？

问题

我的代码

4 个答案: