Rails/HTML 在旁边安装三个按钮

Question

我有 3 个彼此相邻的按钮，在我的 Macbook 13'' 中，一切看起来都应该：

但在 Zenbook 14（屏幕更大？！）上，事情变得很奇怪：

我正在使用引导程序，如何防止这种情况？代码如下：

Status: <%= UserAuthorization.statuses[authorization.status].upcase %>
</br>
<% unless authorization.approved? %>
  <button class="modal-trigger btn btn-bh btn-xs btn-lng",
          data-toggle="modal",
          data-target="#confirm-caregiver-approve",
          data-modal-confirm-url="<%= approve_caregiver_authorization_path(authorization, registrant_page: true) %>">
          APPROVE
  </button>
<% end %>
<% unless authorization.declined? %>
  <button class="modal-trigger btn btn-bh btn-xs btn-lng",
          data-toggle="modal",
          data-target="#confirm-caregiver-decline",
          data-modal-confirm-url="<%= decline_caregiver_authorization_path(authorization, registrant_page: true) %>">
          DECLINE
  </button>
<% end %>
<% if authorization.pending? %>
  <button class="modal-trigger btn btn-bh btn-xs btn-lng",
          data-toggle="modal",
          data-target="#confirm-caregiver-in_review",
          data-modal-confirm-url="<%= in_review_caregiver_authorization_path(authorization, registrant_page: true) %>">
          IN REVIEW
  </button>
<% end %>

[编辑]

此文件是部分文件，因此呈现它的文件如下所示：

<div class="row">
  <div class="col-md-12">
    <%= render partial: 'user_authorizations/user_authorization_review',
               locals: { authorization: registrant.user_authorizations.last } %>
  </div>
</div>

当我尝试添加如下网格时：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      button here
    </div>
    <div class="col-md-4">
      button here
    </div>
    <div class="col-md-4">
      button here
    </div>
  </div>
</div>

更糟糕的是：

Answer 1

当您使用Bootstrap 时，我建议您使用Grid layout 并将您的按钮包装成row。

以下是可能匹配的内容：

<div class="container">
  <div class="row">
    <div class="col-md-2">
      button here
    </div>
    <div class="col-md-2">
      button here
    </div>
    <div class="col-md-2">
      button here
    </div>
  </div>
</div>