Каков наиболее эффективный способ размещения элемента привязки, который расположен в элементе списка, с использованием JSX или Bootstrap

Question

У меня есть код, который выглядит следующим образом

<li className = "list-group-item list-group-item-success" key ={todo.id}>{todo.text}<a className="edit-todo" onClick={() => props.onEdit(todo)}
          className="glyphicon glyphicon-edit" href="#"></a><a className="delete-todo" onClick={() => props.onDelete(todo)}
          className="glyphicon glyphicon-trash" href="#"></a>

Я бы хотел, чтобы элементы привязки располагались в правой части списка. Спасибо.

Answer 1

Посмотрите на значки, предоставленные Bootstrap: http://getbootstrap.com/docs/4.1/components/list-group/#with-badges

Пример из документации:

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

Чтобы конкретно ответить на ваш вопрос, утилиты flex (.d-flex .justify-content-between .align-items-center), предоставляемые Bootstrap, - это то, что перемещает значок с правой стороны элемента списка, оставляя текст слева. Вы можете использовать любой элемент внутри элемента списка.