Question

我正在创建一个简单的2列布局。左列应该是窄的并且包含垂直导航栏，右列将包含站点的主要内容。我正在使用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>

良好的预期行为：

为：

Answer 1

实际上问题是第二列中的.container类有width ...更好或删除它，并在第一列中使用.is-one-third类使其更小或其他 [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>

Bulma flexbox列落在页面

1 个答案: