Question

通常在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>

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

布尔选择字段不等间距

1 个答案: