(Bootstrap 4)与bg-color一起使用时卡边框变得不好/不同

时间:2018-10-23 06:19:30

标签: css twitter-bootstrap bootstrap-4

(引导程序4.1.3) 我正在尝试自定义卡片。所以首先我把border-danger

<div class="row">
    <div class="col">
        <div class="card border-danger">
            <div class="card-header border-danger">
                Label
            </div>
            <div class="card-body">
                Text <br/>
                Text
            </div>
        </div>
    </div>
</div>

我得到以下信息:

Border only

到目前为止,一切都很好。 然后,我将尝试使用相同的代码,但使用以下代码来更改标题的背景:

...
<div class="card-header border-danger bg-white">
...

因此,卡顶部的边框会变薄(变细): enter image description here

卡,卡头,卡身等上的边框和bg-some_color的任何组合都会导致此类边框问题(不仅在顶部,而且在侧面或底部)。

谁能解决这个问题或提供一些避免的提示?

非常感谢!

---编辑------------------------------------------- -

我在Bootstrap 4网站上尝试了hello world模板(cdn链接到4.0.0而不是4.1.3) 在FF Developer 64.0b2(64位)中,它看起来很完美。

在Crhome版本70.0.3538.67(官方内部版本)(64位)中,我得到: enter image description here

然后,我将代码粘贴到codeply中。在FF和Chrome中,结果都可以。 FF确实显示了1 px的细边框,而Crhome显示了较粗的边框(但无论如何都是统一的)。仍然在我的本地计算机上,我遇到了问题...

1 个答案:

答案 0 :(得分:0)

似乎只有在Crhome版本70.0.3538.67(正式版本)(64位)中,这才是浏览器/屏幕分辨率问题。

我有2种不同的4K / 28“显示器,缩放比例设置为175%。 当我处于全屏模式时,我会收到错误消息。当我调整浏览器窗口的大小时,我会看到看起来正确的窗口大小,而出现错误的其他大小-当一个人调整窗口大小时,它会改变。

FF,Edge甚至IE11上都没有这种问题。