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

How to get rid of spacing between Bootstrap panels?

提问by 14wml

The Problem

问题

There are spaces between my panels (outlined in red) and I want to get rid of them. I tried doing:

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

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

But it didn't work.

但它没有用。

For the white space at the very bottom of the page, I tried setting the encompassing containerand #Menuto margin-bottom: 0, but that didn't work.

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

If anyone could let me know how to get rid of the spacing, I would appreciate it very much!

如果有人能让我知道如何摆脱间距，我将不胜感激！

My Code

我的代码

HTML

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

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

JSFiddle

回答by Isabel Inc

Add this to your CSS file. It should remove the extra margin.

将此添加到您的 CSS 文件中。它应该删除额外的边距。

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

Additionally you could also add a class to your panels so that you don't change any other panels by mistake

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

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

Also its a good idea to use the browser inspector to see what styles are being applied to which elements.

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

Happy coding!

快乐编码！

回答by mirza

You can override other rules with importantflag.

您可以使用重要标志覆盖其他规则。

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

回答by Quiver

Try this:

试试这个：

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

回答by J11

You can use the !importantmodifier.

您可以使用!important修饰符。

Your fiddle here

你的小提琴在这里

Just be weary that it will modify all your .panels.

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

I suggest you define a custom class, and use it where you want this modification to take place.

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