Блог

Я пытаюсь встроить кнопку справа только с начальной загрузкой.

 const todoList = ({ todos }) => {
  return (
    <div>
      <ListGroup>
        {todos.map((todo) => {
          return (
            <div key={todo.todo_id} className="">
              <ListGroupItem
                className="mt-1 mx-5 text-center rounded-pill inline"
                color="success"
              >
                <h5 className=""> {todo.content}</h5>
                <button type="button" className="  btn btn-dark rounded-pill ">
                  Dark
                </button>
              </ListGroupItem>
            </div>
          );
        })}
      </ListGroup>
    </div>
  );
};  

Я пытался использовать параметры формы и flex без какого-либо успеха. он отображает его для меня в виде небольшого пузырька странным образом.

Удалил атрибут color="success" из <ListGroupItem> и добавил класс начальной загрузки bg-succes или text-success соответственно к нему.

 <div key={todo.todo_id} className="">
   <ListGroupItem className="mt-1 mx-5 text-center rounded-pill inline text-success">
      <h5 className=""> {todo.content}</h5>
      <button type="button" className="btn btn-dark rounded-pill">
         Dark
      </button>
   </ListGroupItem>
</div>
  

Если вы хотите добавить <h5> и <button> ко всем элементам списка, тогда было бы лучше поместить элементы <h5> и <button> внутри <ListGroupItem> компонента. Тогда код будет выглядеть следующим образом:

 <div key={todo.todo_id} className="">
  <ListGroupItem className="mt-1 mx-5 text-center rounded-pill inline text-success" />
</div>
  

Здесь элемент h5 и button находится внутри ListGroupItem.js компонент.

Для встраивания элемента списка в список, чтобы сделать его горизонтальным списком, вам нужно использовать list-inline class to <ul> или <ol> и list-inline-item class to <li> . Ваш фрагмент будет выглядеть как:

 <div key={todo.todo_id} className="">
  <ListGroupItem className="mt-1 mx-5 text-center rounded-pill list-inline text-success" />
</div>