css - Bulma 选择字段不等间距

Question

通常在 bulma.css 中，如果您将多个“字段”添加到“字段主体”，这些字段将在同一行上等距分布(参见我的示例中的名字和姓氏字段)。如果您添加一个选择字段，默认情况下该字段是窄的，但文档说您可以使用“is-fullwidth”将其设置为全 Angular 。这不会导致 2 个字段的间距相等，但是，它会变成大约 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>
         

Answer 1

Make these changes

1. Add class <span class="select is-fullwidth"> 
2. Add following css 
@media screen and (min-width: 769px), print
  .field-body > .field:not(.is-narrow) {box-flex: 1;  flex-grow: 1;}
  .field-body>.field{ flex:1;}
}

3. If icons alignment not corrected than use this code 
   .control.has-icons-left .icon{ left:0 !important;}