Обычно в bulma.css, если вы добавляете несколько «полей» в «поле-тело», эти поля становятся на одинаковом расстоянии друг от друга в одной строке (см. поля имени и фамилии в моем примере). Если вы добавите поле выбора, по умолчанию это поле будет узким, но в документации говорится, что вы можете сделать его полной ширины с помощью «is-fullwidth». Однако это не приводит к одинаковому интервалу между двумя полями, он становится примерно 60-40%. Почему это происходит? Я бы хотел, чтобы интервал поля выбора вел себя как другие поля.
(Запустите фрагмент на всю ширину страницы, чтобы увидеть проблему)
<script src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet"/>
<div class="column is-half-widescreen">
<div class="box">
<form action="." method="post">
<div class="field">
<label class="label">Name</label>
<div class="field-body">
<div class="field">
<p class="control has-icons-left is-expanded">
<input class="input" type="text" placeholder="First Name">
<span class="icon is-small"><i class="fa fa-user"></i></span>
</p>
</div>
<div class="field">
<p class="control has-icons-left is-expanded">
<input class="input" type="text" placeholder="Last Name">
<span class="icon is-small"><i class="fa fa-user"></i></span>
</p>
</div>
</div>
</div>
<div class="field">
<label class="label">Company</label>
<div class="field-body">
<div class="field">
<p class="control has-icons-left is-expanded">
<input class="input" type="text" placeholder="Company">
<span class="icon is-small"><i class="far fa-building"></i></span>
</p>
</div>
<div class="field">
<p class="control has-icons-left is-expanded">
<span class="select">
<select>
<option>dropdown</option>
<option>options 1</option>
</select>
</span>
<span class="icon is-small is-left"><i class="far fa-building"></i></span>
</p>
</div>
</div>
</div>
<div class="field">
<label class="label">Company</label>
<div class="field-body">
<div class="field">
<p class="control has-icons-left is-expanded">
<input class="input" type="text" placeholder="Company">
<span class="icon is-small"><i class="far fa-building"></i></span>
</p>
</div>
<div class="field">
<p class="control has-icons-left is-expanded">
<span class="select is-fullwidth">
<select>
<option>dropdown</option>
<option>options 1</option>
</select>
</span>
<span class="icon is-small is-left"><i class="far fa-building"></i></span>
</p>
</div>
</div>
</div>
</form>
</div>
</div>
