仅使用 BootStrap 内联内容，答案

【问题标题】：Inline content with BootStrap Only,仅使用 BootStrap 内联内容，
【发布时间】：2020-12-24 23:24:25
【问题描述】：

我尝试仅使用引导程序将右侧的按钮内联。

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 选项但没有成功。它以一种奇怪的小气泡呈现给我。

【问题讨论】：

检查您的应用程序中使用的引导程序版本。
如果我们认为子代码是正确的，那么我们可以检查父代码。有时我们会得到解决方案。

标签： javascript twitter-bootstrap bootstrap-4 reactstrap

【解决方案1】：

从<ListGroupItem> 中删除属性color="success" 并相应地添加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 和按钮元素在 ListGroupItem.js 组件中。

要内联列表中的列表项以使其成为水平列表，您需要使用list-inline 类到<ul> 或<ol> 和list-inline-item 类到<li>。您的 sn-p 将如下所示：

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

【讨论】：

我理解你的意思，但内联不起作用，按钮和文本仍然在不同的行上
要水平显示列表中的所有项目，请在<ul> 或<ol> 中使用list-inline 类而不是inline 类并在list-inline-item 类中使用list-inline-item 类。