Bootstrap 3中跨容器的功能区不起作用答案

【问题标题】：Ribbon across container in Bootstrap 3 not workingBootstrap 3中跨容器的功能区不起作用
【发布时间】：2014-08-12 20:42:51
【问题描述】：

我不太确定我在这里做错了什么。

我正在尝试使用此站点上的示例在容器中应用功能区： http://www.andreapinchi.it/css3-ribbon-effect/

我在这里创建了问题的模型： http://jsbin.com/rebexatijizi/1/edit

看起来不太像另一个。 :(

*注意：上面更新了 JSBIN 链接以显示当前状态。

【问题讨论】：

标签： css twitter-bootstrap-3 containers ribbon

【解决方案1】：

演示：http://jsbin.com/tibaqenawena/4/edit

CSS：

.ribbon, .ribbon:before, .ribbon:after {box-sizing:content-box;}

您也可以在 CSS 中调整数学以包括填充和边框。演示：http://jsbin.com/dupac/1/edit

div.both_ribbon::before{
    display: block;
    width: 10px;
    height: 0px;
    position: absolute;
    bottom: -10px;
    left: -2px;
    content: "";
    border-bottom: 10px solid transparent;
    border-right: 10px solid rgb(0, 80, 116);
}

div.both_ribbon::after{
    display: block;
    width: 10px;
    height: 0px;
    position: absolute;
    bottom: -10px;
    right: -2px;
    content: "";
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgb(0, 80, 116);
  }

另外，你的 css 搞砸了，现在仍然如此，你在另一个样式中包含了一个样式。

【讨论】：

我很好奇你为什么没有选择这个作为答案。
非常接近。它解决了色带末端显示不正确的问题。我想我还不完全在那里。主体的背景应该是#f5f5f5，并且上面包裹有色带的页面/容器应该是白色的，并带有阴影，如示例中所示。不过，我仍在努力。
啊。好吧，我现在去吃饭，明天回来。
谢谢。 {box-sizing:content-box;} 肯定会有所帮助。我只是不明白其余的。还在尝试。
我可以通过在容器中添加：padding-left: 0px; padding-right: 0px; 来修复它

【解决方案2】：

您的 box-sizing 属性似乎把一切都搞砸了。在 bootstrap.css 中删除 box-sizing 规则。此外，从容器中取出填充（您可以在容器中添加另一个具有填充的子元素）。这是您应该删除的代码：

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

:before, :after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

【讨论】：

哦...如果可能的话，我希望不要从 BS3 标准 css 文件中删除任何内容（您是说要从 bootstrap.min.css 中删除上述内容？）
你是对的——从 bootstrap.min.css 评论上述内容确实“修复”了功能区问题，但不幸的是，它破坏了许多其他东西的大小。
如果您在自定义 CSS 文件中添加此代码，这应该仍然有效，对于迟到的回复感到抱歉。如果它仍然不起作用，您可以通过在上面的代码前面加上容器 ID 来使您的 CSS 选择器更加具体。