Bulma 卡在调整大小时改变宽度 window

Question

window 缩小时的卡片

放大时的卡片

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

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

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

Bulma 卡在调整大小时改变宽度 window

Bulma cards changing width when resizing window

html

css

responsive

bulma