html - 一行中的 Span 元素不会包含在 Chrome 浏览器的 Bootstrap 容器中
问题描述
我有一个奇怪的问题。在 250 像素宽的 Bootstrap 容器中的一行中包含多个元素。我希望元素包裹并填充在 250px 列中。几个月前，这曾经在 Chrome 中工作，但现在不再适用了！适用于 IE、Safari、Edge。Chrome 中发生了什么？如何通过最小的更改使其再次在 Chrome 中运行？
代码如下：
<!doctype html>
<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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<style>
.tag {
height: 26px;
width: auto;
border: 1px solid #CAD8F3;
background-color: #DEE7F8;
border-radius: 6px;
line-height: 24px;
text-align: center;
display:inline-block;
padding-right: 10px;
padding-left: 10px;
font-family: Arial, sans-serif;
font-size: 100%;
color: #555555;
margin-bottom: 3px;
cursor: pointer;
}
.tag:hover {
background-color:#b2ccf7;
border: 1px solid #5b7596;
}
</style>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- CODE STYLE -->
<!-- OBJECTIVE IS TO WRAP SPAN ITEMS WITHIN THE 250PX COLUMN WIDTH -->
<!-- WORKS IN IE, SAFARI, EDGE, BUT NOT IN CHROME -->
<!-- *** USED TO WORK IN CHROME *** A FEW MONTHS AGO, BUT NOW GET A LONG TAGLIST THAT FALLS OFF THE PAGE, DOES NOT WRAP WITHIN THE 250PX COLUMN -->
<div id="side" style="width: 250px; margin-left: 50px; margin-top: 0px;">
<div class="container" id="custom_tags_show" style="display:block;">
<span id="tags">
<!-- BELOW IS GENERATED BY SQL COMMAND, WOULD LIKE TO KEEP THIS FORMAT IF POSSIBLE, TO AVOID CHANGING CODE IN MANY PLACES -->
<span class="tag tagHover" data-tag="tag">jfk <span style="font-size:70%;">(3)</span></span> <span class="tag tagHover" data-tag="tag">food <span style="font-size:70%;">(3)</span></span> <span class="tag tagHover" data-tag="tag">super-natural <span style="font-size:70%;">(3)</span></span> <span class="tag tagHover" data-tag="tag">booboo <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">e <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">new <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">asdf <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">huno <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">two <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag"> <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">dsfg <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">time <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">growth <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">contradictions <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">archaeology <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">family <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">hotmail <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">shocking <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">baby <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">big <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">dd <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">ff <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">four <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">g <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">job <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">sss <span style="font-size:70%;">(1)</span></span>
</span>
</div>
</div>
<br>
<!-- THIS WORKS IN CHROME TO WRAP THE SPAN OBJECTS, BUT THIS IS NOT WHAT IS GENERATED BY THE SQL COMMAND AND WOULD RATHER NOT HAVE TO CHANGE CODE TO ACCOMODATE THIS -->
<div id="side" style="width: 250px; margin-left: 50px; margin-top: 0px;">
<div class="container" id="custom_tags_show" style="display:block;">
<span id="tags">
<span class="tag tagHover" data-tag="tag">jfk <span style="font-size:70%;">(3)</span></span>
<span class="tag tagHover" data-tag="tag">food <span style="font-size:70%;">(3)</span></span>
<span class="tag tagHover" data-tag="tag">super-natural <span style="font-size:70%;">(3)</span></span>
<span class="tag tagHover" data-tag="tag">booboo <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">e <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">new <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">asdf <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">huno <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">two <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag"> <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">dsfg <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">time <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">growth <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">contradictions <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">archaeology <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">family <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">hotmail <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">shocking <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">baby <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">big <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">dd <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">ff <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">four <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">g <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">job <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">sss <span style="font-size:70%;">(1)</span></span>
</span>
</div>
</div>
</body>
</html>
解决方案
当我删除每个标签元素末尾的 时，我发现包装在 Chrome 中有效：
原始标签元素：
<span class="tag tagHover" data-tag="tag">jfk <span style="font-size:70%;">(3)</span></span>
TAG ELEMENT WITH 从末尾移除
<span class="tag tagHover" data-tag="tag">jfk <span style="font-size:70%;">(3)</span></span>
与 Chrome 包装一起使用的完整标签系列如下：
<span class="tag tagHover" data-tag="tag">jfk <span style="font-size:70%;">(3)</span></span><span class="tag tagHover" data-tag="tag">food <span style="font-size:70%;">(3)</span></span><span class="tag tagHover" data-tag="tag">super-natural <span style="font-size:70%;">(3)</span></span><span class="tag tagHover" data-tag="tag">booboo <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">e <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">new <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">asdf <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">huno <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">two <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag"> <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">dsfg <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">time <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">growth <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">contradictions <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">archaeology <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">family <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">hotmail <span style="font-size:70%;">(2)</span></span><span class="tag tagHover" data-tag="tag">shocking <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">baby <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">big <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">dd <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">ff <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">four <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">g <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">job <span style="font-size:70%;">(1)</span></span><span class="tag tagHover" data-tag="tag">sss <span style="font-size:70%;">(1)</span></span>
然后在每个元素之间放置一点空间，可以通过为每个标签元素设置一些边距来完成（此处未显示）。
不知道为什么 Chrome 对该位置的反应与其他浏览器不同（包装很好），但这就是我发现的。
推荐阅读
- c# - 从 IQueryable 对象将列和行插入电子表格
- javascript - React Native iOS webview如何通过uri加载本地html
- c# - C#倒数计时器，没有准确性。寻找不同的方法来做到这一点
- javascript - 如何使 AWS S3 请求可重试？
- php - 在添加新值的同时更新现有值
- javascript - 如何在 Vue 中将输入文件的内容切换为加密和非加密？
- node.js - 如何在 Node.js 中查看脚本范围的变量
- c - 如何构建 libonion？
- jquery - 使用 jquery-datatables 获取数据
- unix - Kubernetes pod 将进入 crashloop 退避：在启动容器时说权限被拒绝