bootstrap-3 выровнять ссылки и кнопки внизу div

Как видно на снимке экрана ниже, ссылки не выровнены по нижней части div. Как выровнять кнопки редактировать, удалить, добавить корзину внизу div. Обратите внимание, что я не использую таблицу.

.bottomaligned {position:absolute; bottom:0;  margin-bottom:7px; margin:7px;}
.fixedheight { height: 208px; position:relative; border:1px solid; margin:7px;}

Здесь вставлены соответствующие биты из шаблона, отображающего страницу, скриншот которой показан ниже. Обратите внимание, что использование css class="bottomaligned" по-прежнему не выравнивает ссылки. Даже когда я добавил width: 300px; в класс CSS .fixedheight, они все равно не выровнялись.

 <div class="row">

  <% @products.each do |product| %>


 <div class="col-lg-3 col-sm-4 col-6 fixedheight ">

    <div class="bottomaligned">
     <%= link_to 'edit', edit_product_path(product), class: "btn btn-danger"  %>

     <%= button_to "Delete", product, data: {confirm: 'Are u sure?'}, method: :delete, class: "btn btn-danger" %>

     <%= button_to "Add to cart", order_items_path(product_id: product) %>

    </div>
    <hr>

  </div><!-- /.col-lg-3 -->

 <% end %>
</div><!-- /.row -->

Скриншот: введите здесь описание изображения


css twitter-bootstrap twitter-bootstrap-3 bootstrap-sass
person brg    schedule 14.08.2013    source источник

Ответы (1)


arrow_upward
21
arrow_downward

Я решил это. Смотрите новый скриншот. Я сделал это, добавив 3 разных класса CSS: выровненный по нижнему краю, по правому нижнему краю и по нижнему краю, поэтому каждая ссылка теперь имеет свой класс CSS.

  .bottomaligned {position:absolute; bottom:0;  margin-bottom:7px; left: 0;}
  .bottomright {position:absolute; bottom:0;  margin-bottom:7px; margin:7px; right: 0;}
  .bottomleft {position:absolute; bottom:0;  margin-bottom:7px; left: 100px;}
  .fixedheight { height: 200px;  width: 243px;  position:relative; border:1px solid;}

Вот как сейчас выглядит шаблон:

  <div class="col-lg-3 col-sm-4 col-6 fixedheight ">

  <div>
    <div >
      <span class="bottomleft"><%= link_to 'edit', edit_product_path(product), class: "btn btn-danger"  %></span>

      <span class="bottomright"><%= button_to "Delete", product, data: {confirm: 'Are u sure?'}, method: :delete, class: "btn btn-danger" %></span>

      <span class="bottomaligned"> <%= button_to "Add to cart", order_items_path(product_id: product) %></span>

     </div>
    <hr>
  </div><!-- /.col-lg-3 -->

Новый скриншот:

введите здесь описание изображения

person brg    schedule 14.08.2013