Html 显示：内联块在引导中不起作用

这是我的

Navbar

组件：

const Navbar = () => {
  return (
    <div className='Navbar'>
      <ul className='list-group w-75 mx-auto'>
        <li className='list-group-item'>
          <i className='fab fa-twitter' id='twitter' />
        </li>
        {nav.map((item) => (
          <Nav key={v4()} iconClass={item.iconClass} name={item.name} />
        ))}
        <li className='mx-auto'>
          <button className='btn butn p-3'>Tweet</button>
        </li>
      </ul>
    </div>
  );
};

export default Navbar;

const Nav = ({ iconClass, name }) => {
return (
    <li onClick={onClick} className='d-flex align-items-center list-group-item'>
      <i className={iconClass} />
      <span>{name}</span>
    </li>
  );
};

export default Nav;

所有

li

都是

显示：块

。我希望它们是

display:inline block

。但它不起作用。我试过在自己的

.scss

文件中使用引导，内联样式。但是没有变化。您能帮忙吗？

将

style=“display:inline block”

添加到引导列表组项目将无效，因为引导

列表组

使用flexbox，项目垂直（列）：

.list组{
显示器：flex；
弯曲方向：立柱；
}
.列表组项目{
位置：相对位置；
显示：块；
}

如果希望列表组中的项目是水平的而不是垂直的，请将

列表组水平

类添加到列表组元素中，这会将默认列表组弹性方向从

列

（垂直）更改为

行

（水平）

为了说明这一点，下面是由上述问题中的代码生成的HTML：

现有导航栏












推特

您是否尝试过使用

？根据文档，

列表组水平

将垂直列表项更改为水平。[列表组>水平]（

）您是否尝试过

display:flex

或

d-flex

|

dispaly:inline flex

或

d-inline-flex

。因为flex是

显示：内联块的更好选择。除此之外，您将能够管理不同的位置，而无需任何额外的css。我已经尝试了
d-inline-flex
和
列表组水平
<代码>d-flex

不工作，

列表组水平

不是我想要的。我只想让

li

的inline block@terrymorse您不能只添加

display:inline block

来列出组项目，强制它们水平显示。这不会有任何效果。使用引导提供的类。请看下面我的答案。@ShahobiddinKhusniddinov太好了，谢谢你让我知道。