我正在创建一个简单的两列布局。左栏应较窄并包含垂直导航栏，右栏将包含网站的主要内容。我使用 bulma-css 列来创建此布局。
我遇到的问题是，根据水平窗口的大小，第二列右侧的部分内容从页面上脱落。因此该列没有适当缩放。
下面是说明该问题的最小示例。根据窗口大小，按钮将(部分)从屏幕上脱落。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
</head>
<body>
<div class="columns">
<div class="column is-narrow">
<p>aaaaaaaaaaaaaaaaa</p>
</div>
<div class="column">
<div class="container">
<p class="button is-primary is-pulled-right">button</p>
</div>
</div>
</div>
</body>
良好的预期行为:
坏:
最佳答案
实际上问题是第二列中的 .container 类，它具有 width...更好或将其删除并使用 .is-one-第一列中的第三个类以使其更小或其他 [bulma grid column classes]
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div class="columns is-mobile">
<div class="column is-one-third">
<p>aaaaaaaaaaaaaaaaa</p>
</div>
<div class="column">
<p class="button is-primary is-pulled-right">button</p>
</div>
</div>关于css - Bulma Flexbox 页面列掉落，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49284320/