For the code repository, visit https://github.com/tenzan/shop/tree/bootstrap
In the displayed image (show action), the Edit and Delete buttons are currently positioned vertically. I want to change their position as shown in the second image below, aligning both buttons with the word Test.
The code snippet from show.html.erb:
<header>
<h1><%= @category.name %></h1>
<ul class="actions">
<li><%= link_to "Edit Category", edit_category_path(@category),
class: "edit" %></li>
<li><%= link_to "Delete Category", category_path(@category),
method: :delete,
data: { confirm: "Are you sure you want to delete this category?" },
class: "delete" %></li>
</ul>
</header>
The stylesheet for these two buttons is as follows (Check a.edit and a.delete sections):
ul.actions {
@extend .list-unstyled;
@extend .list-inline;
position: absolute;
bottom: -2px;
right: 2px;
max-width: 45%;
text-align: right;
}
a.new, a.edit, a.delete {
@extend .btn;
&:before {
font-family: "FontAwesome";
padding-right: 0.5em;
}
}
a.new {
@extend .btn-success;
&:before {
@extend .fa-plus;
}
}
a.edit {
@extend .btn-primary;
&:before {
@extend .fa-pencil;
}
}
a.delete {
@extend .btn-danger;
&:before {
@extend .fa-trash;
}
}
This is the current appearance https://i.sstatic.net/XvJHY.png
This is the desired layout https://i.sstatic.net/86PVQ.png