У меня тут довольно странная ситуация. У меня есть этот 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 больше не возникает проблем. К этому же приводит CSS CDN с великолепными шрифтами.
Есть два columns
, потому что один для закрепленных заметок (отображается первым), а другой для обычных.
Проблема
В Chrome с мобильным окном просмотра ширина страницы больше, чем окно просмотра, но не в Firefox. Я исправил это, удалив тег script
, импортирующий Font-Awesome, но мне нужен был потрясающий шрифт и его значки.
.columns multiline
вы определяете только два.is-one-third
. Должны ли вы определить три, чтобы bulma мог знать ширину столбцов, которые он будет охватывать?. - person Yoarthur   schedule 15.12.2018columns
может быть 3 или 20 карт. Я новичок в HTML, поэтому надеюсь, что делаю это правильно - person W. Reyna   schedule 15.12.2018