在自定义css之后，在Bootstrap中打破了底部圆角(Bottom rounded corners broken in Bootstrap after custom css)

在自定义css之后，在Bootstrap中打破了底部圆角(Bottom rounded corners broken in Bootstrap after custom css)

我使用的是3.3.0的最新版本，但从3.2.0开始我就遇到了这个问题。 下圆角不连接。

随着3.2.0：

3.1.1：

我刚刚发现如果我添加以下行：

background-color: #ffffff !important;

并改变：

padding: 15px;

至

padding: 0px;

上课：

.panel-body

它打破了劣质圆角。

如何强制面板体具有白色背景和0px填充？

http://jsfiddle.net/Khrys/730sjq8n/

I am using the last version 3.3.0, but since 3.2.0 I have this issue. The inferior round corners do not connect.

With 3.2.0:

With 3.1.1:

I just found if I add the following line:

background-color: #ffffff !important;

and changing the:

padding: 15px;

to

padding: 0px;

to the class:

.panel-body

it breaks the inferior round corners.

How can I force the panel-body to have a white background and 0px padding?

http://jsfiddle.net/Khrys/730sjq8n/

最满意答案

添加以下样式：

.panel-body { border-radius: 4px; }

问题是，当您为容器提供边框和边框半径时，容器内的内容为白色背景，没有border-radius。 因此，你有一个圆形框，里面有一个方块，因此会略微切掉边框。

在内容中添加边框半径，使内容适合容器内部。

或者，您可以删除背景颜色：

.panel-body { background-color: transparent; }

这也是一个解决方案。

Add the following style:

.panel-body { border-radius: 4px; }

The issue was that while you gave the container a border and a border-radius, you had the content within the container a background of white with no border-radius. Therefore, you had a round box with a square block inside it, thus cutting off the border slightly.

Add a border radius to the content allowed the content to fit inside your container.

Alternatively, you can remove the background color:

.panel-body { background-color: transparent; }

That would also be a fix.