改变按钮的宽度 - 响应式网页 (bulma)

Question

我正在尝试让我的页面响应，我想在页面的移动版本中更改按钮的宽度以占据页面的整个宽度。这是桌面版本的外观：

这是移动版本的外观：

我不知道如何更改我的按钮，以便它使用 bulma 占据所有屏幕宽度。这是我的代码：

<div className="buttons mt-6 mx-4 is-justify-content-space-between">
        <button className="button has-background-link has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
          <span className="mx-4">Back</span>
        </button>
        <button className="button has-background-primary has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
          <span>Go to Basket</span>
        </button>
      </div>

我标记了 HTML、CSS 和 Bulma，因为我不确定以下哪一项可以解决问题，因为我正在使用 bulma，但这是 bulma 反应性的外部问题

Answer 1

试试这个

#test {
   width: 100%;
   min-width: 50px;  // add this if you want
   max-width: 300px; // add this if  you want, adjust accordingly
}

<div className="buttons mt-6 mx-4 is-justify-content-space-between">
        <button id="test" className="button has-background-link has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
          <span className="mx-4">Back</span>
        </button>
        <button id="test" className="button has-background-primary has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
          <span>Go to Basket</span>
        </button>
      </div>

Answer 2

您也可以在 CSS 中使用@media 标签。

<style>
/* Default Styling */
.button {
    width: 300px;
}

/* Only applies if the window with is under 600px */
@media only screen and (max-width: 600px) {
    .button {
        width: 100%;
    }
}
</style>

<div className="buttons mt-6 mx-4 is-justify-content-space-between">
    <button className="button has-background-link has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
        <span className="mx-4">Back</span>
    </button>
    <button className="button has-background-primary has-text-white has-text-weight-bold" style={{ borderRadius: 10 }}>
        <span>Go to Basket</span>
    </button>
</div>

改变按钮的宽度 - 响应式网页 (bulma)

Changing the width of a button - Responsive webpage (bulma)

html

css

bulma