Bulma CSS - 輸入字段和選擇元素之間的寬度不一致

Question

我需要使用 Bulma 框架創建表單，但我在創建布局時偶然發現了輸入/選擇字段之間的寬度差異。

如下圖所示：

如您所見，輸入字段（1，插入名稱）和選擇元素（2，標簽）之間存在差異，所以我的問題是如何修復選擇的寬度以匹配上面輸入字段的寬度（1，插入名稱）

這是代碼：

 <br /> <div class="columns"> <div class="column is-4"> <div class="columns is-desktop"> <div class="column is-3"> <p> <label> Awesome labelsss </label> </p> </div> <div class="column is-7"> <div class="field"> <div class="select"> <select> <option>Select dropdown</option> <option>With options</option> </select> </div> </div> </div> </div> <div> <br /> <div class="columns is-desktop"> <div class="column is-3"> <p> <label> Some text </label> </p> </div> <div class="column is-7"> <div class="field is-horizontal"> <div class="field-body"> <div class="field"> <p class="control"> <input class="input" type="text" data-precision="5"> </p> </div> <div class="field is-narrow"> <p class="control is-expanded"> <span class="select is-fullwidth" style="width: 79px !important;"> <select id="Unit" name="unitID" style="height: 36px !important;"> <option>Select dropdown</option> <option>With options</option> </select> </span> </p> </div> </div> </div> </div> </div> </div> <br /> <div class="columns is-desktop"> <div class="column is-3"> <p> <label> date ee </label> </p> </div> <div class="column is-7"> <div class="field"> <div class="control has-icons-right"> <input class="input" name="dateLinked" type="date" id="LinkDate" data-range="-100:+2"> <span class="icon is-small is-right" style="cursor: pointer;"> <i class="icon-calendar"></i> </span> </div> </div> </div> </div> <div class="columns is-desktop"> <div class="column is-3"> <p> <label> date ss </label> </p> </div> <div class="column is-7"> <div class="field"> <div class="control "> <input class="input" id="UnlinkDate" type="date" data-range="-100:+2"> <span class="icon is-small is-right" style="cursor: pointer;"> <i class="icon-calendar"></i> </span> </div> </div> </div> </div> <div class="columns is-desktop"> <div class="column is-3"> <p> <label> Insert name </label> </p> </div> <div class="column is-7"> <div class="field"> <div class="control"> <input class="input" id="Name" name="name" type="text"> </div> </div> </div> </div> <div class="columns is-desktop"> <div class="column is-3"> <p> <label> LAbelos </label> </p> </div> <div class="column is-7"> <div class="field"> <div class="select"> <select> <option>Select dropdown</option> <option>With options</option> </select> </div> </div> </div> </div> <div class="columns is-desktop"> <div class="column is-3"> <p> Another 1 text </p> </div> <div class="column is-7"> <div class="field"> <div class="control"> <input class="input numeric" id="TableNumber" name="tableNumber" type="text"> </div> </div> </div> </div> <div class="columns is-desktop"> <div class="column is-3"> <p> <label> Another select </label> </p> </div> <div class="column is-7"> <div class="field"> <div class="select"> <select> <option>-</option> <option>Select dropdown</option> <option>With options</option> </select> </div> </div> </div> </div> <div class="columns is-desktop"> <div class="column is-3"> <p> <label> Some tekxt </label> </p> </div> <div class="column is-7"> <div class="field"> <div class="select"> <select> <option>-</option> <option>Select dropdown</option> <option>With options</option> </select> </div> </div> </div> </div> <div class="columns is-desktop"> <div class="column is-3"> <p> <label> Some number </label> </p> </div> <div class="column is-7"> <div class="field"> <div class="control"> <input class="input" type="text"> </div> </div> </div> </div> </div> <div class="column is-8"> <div class="somebackground"></div> </div> </div>

這是小提琴：

https://jsfiddle.net/Svinjica/kzp6L5eh/34/

Answer 1

將此添加到css：

.select, .select select{ 
width: 100%;
}

見工作小提琴

Answer 2

有一個 bulma 類： is-fullwidth fullwidth 用於此目的