仅使用 BootStrap 内联内容，

Posted 2023-03-23

【中文标题】仅使用 BootStrap 内联内容，

【英文标题】：Inline content with BootStrap Only,

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

【问题讨论】：

检查您的应用程序中使用的引导程序版本。

如果我们认为子代码是正确的，那么我们可以检查父代码。有时我们会得到解决方案。

【参考方案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 类。