更改按钮响应网页(bulma)的宽度

Question

我试图使我的网页响应，我想在移动版本的网页，以改变一个按钮的宽度，以占据整个页面的宽度。桌面版本应该是这样的：

​

这就是移动版本，它应该是什么样子：

​

​

我不知道如何改变我的按钮，这样它就可以使用凸包来参与所有的屏幕宽度。这是我的密码：

<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

您还可以在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>

Answer 2

尝尝这个

#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>