将提交按钮添加到输入字段的末尾 Rails Bootstrap simple_form

Question

rails 6
bootstrap
simple_form

我有一个views/books/index.html/slim，如下：

#BooksIndex
  table.table.table-striped.table-hover
    thead
      tr.d-flex
        th.col-10
          = t('books.name')
        th.col-1
        th.col-1
    tbody
      - @Books.each do |Book|
        tr.d-flex
          td.col-sm-10 = Book.name
          td.col-sm-1 = link_to edit_Book_path(Book)
            i.fas.fa-edit.fa-lg
          td.col-sm-1 = link_to Book, data: { confirm: t('are_you_sure') }, method: :delete
            i.fas.fa-trash-alt.fa-lg
#AddBookForm
  = simple_form_for(@Book || Book.new) do |f|
    .form-inputs
      = f.input :name, placeholder: t('Books.views.index.enter_name_of_Book_you_like_to_add'), label:false
    span.form-actions
      button.btn.btn-primary type="submit"
       = "Create Book"

#AddBookForm 生成以下视图：

当我提交时，它会产生以下内容：

Started POST "/Books" for 127.0.0.1 at 2020-03-12 12:46:44 -0700
Processing by BooksController#create as HTML
  Parameters: {"authenticity_token"=>"....", "Book"=>{"name"=>"Fun"}}

我希望在文本输入字段的末尾有一个提交按钮，如下所示：

我尝试了不同的跨度变体，并使用了列，但它总是显示在下一行。有什么想法吗？

Answer 1

这实际上更像是一个引导问题，但在这里

 = simple_form_for(@Book || Book.new), html: { class: "form-inline" } do |f|
   = f.input :name, placeholder: t('Books.views.index.enter_name_of_Book_you_like_to_add'), class: "form-control", label_html: { class: "mr-2"}
  button.btn.btn-primary.ml-2 type="submit"
   = "Create Book"

我添加了 label_html 属性，因此您可以指定标签标签，因为该部分应该根据您的预期结果显示。

检查语法，因为我习惯了haml。但如果你想让 codepen 看看它的外观，请检查： https://codepen.io/jean182/pen/ZEGxWQB