小编Rom*_*ain的帖子

Card-columns Embed Instragram Posts : Chrome 和其他浏览器的区别

我使用 Boostrap 4 card-columns 在网站上分享 instragram 帖子。

Chrome 和其他浏览器之间存在差异。事实上，Chrome 失去了第二列。您可以在屏幕截图中看到差异。

我的代码：https : //codepen.io/Rom1-1984/pen/rNOjzjw

<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script async src="//www.instagram.com/embed.js"></script>
    <title>Embed Instagram</title>
  </head>
  <body>
  <div class="container">
    <div class="card-columns">
	  <div class="card p-4" style="border:none;">
	   <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/B-4-YpYgOpo/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); …

Run Code Online (Sandbox Code Playgroud)

html google-chrome twitter-bootstrap bootstrap-4

Rom*_*ain

2020 05-04

6
推荐指数

1
解决办法

213
查看次数