css - 语义 UI ui 表单段在侧边栏中没有高度

Question

我有一个可以滑出垂直侧边栏的按钮。在侧边栏内，我希望有一个简短的表单供用户输入搜索查询。

#search-sidebar是正确的高度。 .ui.form.segment高度只有 4px。

我对正在发生的事情感到茫然......

<div id="search-sidebar" class="overlay ui very wide red vertical demo sidebar menu">
  <div class="ui form segment">
    <div class="two fields">
      <div class="field">
        <label>Number of Bedrooms</label>
        <input type="number" name="bedrooms">
      </div>
      <div class="field">
        <label>Number of Bathrooms</label>
        <input type="number" name="bathrooms">
      </div>
    </div>
    <div class="three fields">
      <div class="field">
        <label>Interior Size</label>
        <div class="ui icon input">
          <input type="number" name="interiorSize">
          <i class="inverted icon">m<sup>2</sup></i>
        </div>
      </div>
      <div class="field">
        <label>Exterior Size</label>
        <div class="ui icon input">
          <input type="number" name="exteriorSize">
          <i class="inverted icon">m<sup>2</sup></i>
        </div>
      </div>
      <div class="field">
        <label>Price</label>
        <div class="ui icon input">
          <i class="inverted yen icon"></i>
          <input type="number" name="price">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我想到了。您必须class="item"在.ui.form.segment. 我不知道为什么你必须这样做。

<div id="search-sidebar" class="overlay ui very wide red vertical demo sidebar menu">
<div class="item">
  <div class="ui form segment">
    <div class="two fields">
      <div class="field">
        <label>Number of Bedrooms</label>
        <input type="number" name="bedrooms">
      </div>
      <div class="field">
        <label>Number of Bathrooms</label>
        <input type="number" name="bathrooms">
      </div>
    </div>
    <div class="three fields">
      <div class="field">
        <label>Interior Size</label>
        <div class="ui icon input">
          <input type="number" name="interiorSize">
          <i class="inverted icon">m<sup>2</sup></i>
        </div>
      </div>
      <div class="field">
        <label>Exterior Size</label>
        <div class="ui icon input">
          <input type="number" name="exteriorSize">
          <i class="inverted icon">m<sup>2</sup></i>
        </div>
      </div>
      <div class="field">
        <label>Price</label>
        <div class="ui icon input">
          <i class="inverted yen icon"></i>
          <input type="number" name="price">
        </div>
      </div>
    </div>
  </div>
</div>
</div>