调整窗口大小时布尔玛卡改变宽度

【问题标题】：Bulma cards changing width when resizing window调整窗口大小时布尔玛卡改变宽度
【发布时间】：2020-07-17 23:13:21
【问题描述】：

窗口缩小时的卡片

放大时的卡片

有什么方法可以让卡片在用bulma调整窗口大小时不改变宽度？

   <div class="container">
    <div class="columns">
        <div class="column center">
            <div class="card">
                <div class="card-content columns is-multiline pr-2 pl-2">
                    <div class="column is-12"></div>
                    <div class="column is-12"></div>
                    <div class="column is-12"></div>
                    <div class="is-block column is-12"></div>
                </div>
            </div>
        </div>

【问题讨论】：

标签： html css responsive bulma

【解决方案1】：

您可以使用 CSS 在卡片上添加固定宽度，但这样您就有点违背了 Bulma 想要您做的事情（保持一切响应）并且可能会破坏您的列。

我认为您最好的选择是包含一些响应式列类，以便您可以根据屏幕大小指定宽度。未经测试，但仅作为示例：

<div class="container">
<div class="columns">
    <div class="column center is-three-quarters-mobile is-two-thirds-tablet is-half-desktop">
        <div class="card">
            <div class="card-content columns is-multiline pr-2 pl-2">
                <div class="column is-12"></div>
                <div class="column is-12"></div>
                <div class="column is-12"></div>
                <div class="is-block column is-12"></div>
            </div>
        </div>
    </div>