仅使用BootStrap内联内容，

问题描述

我尝试仅使用引导程序向右插入按钮。

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>
  );
};

我尝试使用form和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或<ul>使用<ol>类，对{{ 1}}。您的代码段将如下所示：

list-inline-item