css - 如何将 submit_tag 按钮与 Bootstrap 中的其他按钮放在一行中？

Question

这是显示 4 个按钮的 Rails 代码片段。问题是按钮 CSV与其他 3 个按钮不在同一行，而是在第二行。

    <div class="btn-toolbar">
           <%= link_to t('Back'), SUBURI + "/authentify/view_handler?index=0", :class => BUTTONS_CLS['action']  %>
           <%= link_to t('Search'), SUBURI + "/view_handler?index=1&url=#{search_payment_requests_path}", :class => BUTTONS_CLS['action'] if has_action_right?('search', params[:controller]) %>
           <%= link_to t('Stats'), SUBURI + "/view_handler?index=1&url=#{stats_payment_requests_path}", :class => BUTTONS_CLS['action'] if has_action_right?('stats', params[:controller]) %>
           <%= form_tag export_file_payment_requests_path(format: 'csv'), method: :patch do %>
              <% record_ids = models.page(params[:page]).per_page(10000).pluck('id') %>
              <%= submit_tag 'CSV', :name => "save[#{record_ids}]" %>
           <% end %>
   </div>

这是按钮的样子:

这是html源代码:

问题是 CSV按钮是 form 上的提交按钮元素:

<div class="btn-toolbar">
    <a class="btn btn-md btn-hover btn-primary" href="/authentify/view_handler?index=0">
    </a>
    <a class="btn btn-md btn-hover btn-primary" href="/authentify/view_handler?index=1&url=/pr/payment_requests/search">
    </a>
    <a class="btn btn-md btn-hover btn-primary" href="/authentify/view_handler?index=1&url=/pr/payment_requests/stats">
    </a>
    </div>
    <form method="post" accept-charset="UTF-8" action="/pr/payment_requests/export_file.csv">
    <input type="hidden" value="✓" name="utf8">
    <input type="hidden" value="patch" name="_method">
    <input type="hidden" value="N4/rNWV7FVB+lq1ul3u08tx79mhlaH1GE9GiCrpP0+6ROHHoySxg6cQhnHbbygGf6Fng==" name="authenticity_token">
    <input class="btn btn-md btn-hover btn-primary" type="submit" value="CSV" name="save[[1244, 1243, 1242, 1241, 1240, 1239, 1238, 1237, 1236, 1235, 1234, 1233, 1112, 1100, 1054, 1018]]">
    </form>
    </div>

我们尝试了 <div class="form-group">没有用。有没有办法把submit_tag按钮与其他 3 个在同一行？

Answer 1

.btn-toolbar form {
  padding: 0;
  top: -1px;
  float: left;
  white-space: nowrap;
  margin-left: 5px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">




<div class="col-xs-12" style="margin-top: 60px; text-align: center;">

  <div class="btn-toolbar">
    <a class="btn btn-md btn-hover btn-primary" href="/authentify/view_handler?index=0">Link 1
    </a>
    <a class="btn btn-md btn-hover btn-primary" href="/authentify/view_handler?index=1&url=/pr/payment_requests/search">Link 2
    </a>
    <a class="btn btn-md btn-hover btn-primary" href="/authentify/view_handler?index=1&url=/pr/payment_requests/stats"> Link 3
    </a>

    <form method="post" accept-charset="UTF-8" action="/pr/payment_requests/export_file.csv">
      <input type="hidden" value="✓" name="utf8">
      <input type="hidden" value="patch" name="_method">
      <input type="hidden" value="N4/rNWV7FVB+lq1ul3u08tx79mhlaH1GE9GiCrpP0+6ROHHoySxg6cQhnHbbygGf6Fng==" name="authenticity_token">
      <input class="btn btn-md btn-hover btn-primary" type="submit" value="CSV" name="save[[1244, 1243, 1242, 1241, 1240, 1239, 1238, 1237, 1236, 1235, 1234, 1233, 1112, 1100, 1054, 1018]]">
    </form>
  </div>

---

我更新了回复。您需要将表单放在工具栏内，并将我提供的 CSS 添加到您的 CSS。