html - 底部连接的按钮与div大小不匹配

我正在一个项目上，我想要一个带有提交按钮的表单，我希望在语义UI文档中使用的按钮样式示例如下：

<div class="ui bottom attached button">
  <i class="search icon"></i>
  Search
</div>

这将创建一个覆盖整个屏幕的按钮。

因此，要创建Rails表单按钮，我需要：

<%= button_tag(type: "submit", class: "ui bottom attached button") do %>
    <i class="search icon"></i> Search
<% end %>

产生HTML：

<button name="button" type="submit" class="ui bottom attached button">
    <i class="search icon"></i> Search
</button>

它将创建相同样式的按钮，但不会跨越屏幕。任何帮助使这项工作将不胜感激。

最佳答案

使用流体类

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>



    <div class="ui bottom attached button">
  <i class="search icon"></i>
  Search
</div>

<button name="button" type="submit" class="fluid ui bottom attached button">
    <i class="search icon"></i> Search
</button>