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

我想通了。您必须在 .ui.form.segment 周围添加 class="item"。不过，我不确定您为什么必须这样做。

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