【发布时间】：2018-12-14 22:25:14
【问题描述】：
我在这里遇到了一个很奇怪的情况。 我有这个 HTML：
<!DOCTYPE html>
<html>
<head>
<title>Notes</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
test1
</p>
<a href="/notes/pin/1" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>testtt</p>
</div>
</div>
<footer class="card-footer">
<a href="/notes/edit/1/" class="card-footer-item">Edit/View</a>
<a href="/notes/delete/1/" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Note test
</p>
<a href="/notes/pin/4" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>- test</p>
</div>
</div>
<footer class="card-footer">
<a href="/notes/edit/4/" class="card-footer-item">Edit/View</a>
<a href="/notes/delete/4/" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
</div>
<div style="padding-top:50px;"></div>
<!--- NON-PINNED -->
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Note test
</p>
<a href="/notes/pin/2" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Testi</p>
</div>
</div>
<footer class="card-footer">
<a href="/notes/edit/2/" class="card-footer-item">Edit/View</a>
<a href="/notes/delete/2/" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Dhchjc
</p>
<a href="/notes/pin/3" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Djfjgn<br>- eat ????</p>
</div>
</div>
<footer class="card-footer">
<a href="/notes/edit/3/" class="card-footer-item">Edit/View</a>
<a href="/notes/delete/3/" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Fhfj
</p>
<a href="/notes/pin/5" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Brjdjc</p>
</div>
</div>
<footer class="card-footer">
<a href="/notes/edit/5/" class="card-footer-item">Edit/View</a>
<a href="/notes/delete/5/" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
</div>
<a href="/notes/new/">
<div id="floating-button" data-toggle="tooltip" data-placement="left" data-original-title="Create">
<p class="plus">+</p>
</div>
</a>
</body>
</html>
还有我的 CSS：
#floating-button {
width: 55px;
height: 55px;
border-radius: 50%;
background: #db4437;
position: fixed;
bottom: 30px;
right: 30px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
}
.plus {
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
}
.column {
margin-top: 10px;
}
.card {
margin-left: 10px;
margin-right: 10px;
max-height: 500px;
}
- 在常规桌面模式下查看时，一切正常。
- 在 Chrome + 移动视口上时，x 轴有轻微溢出。
- 在 Firefox + 移动视口上查看时，没问题。
- 删除
script标签导入Font-Awesome后，Chrome上不再有任何问题。 font-awesome CSS CDN 也会导致这种情况。
有两个columns，因为一个用于固定笔记（首先显示），另一个用于常规笔记。
问题
在带有移动视口的 Chrome 上，页面宽度大于视口，但在 Firefox 上则不然。我通过删除 script 导入 Font-Awesome 的标签来修复它，但我需要很棒的字体和它的图标。
【问题讨论】：
-
请问，有什么问题吗？具体一点。
-
@Yoarthur 已编辑
-
在第一个
.columns multiline中，您只定义了两个.is-one-third。您是否应该定义三个以便 bulma 知道他将跨越的列的宽度？。 -
我想每行有 3 张卡片。我添加了多行，以便它跨越多行。这些卡片也是动态生成的——所以在第一个
columns中可以有 3 或 20 张卡片。我是 HTML 新手，所以我希望我做对了
标签： html css font-awesome bulma