显示：内联块在引导程序中不起作用答案

【问题标题】：display:inline-block is not working in Bootstrap显示：内联块在引导程序中不起作用
【发布时间】：2021-05-01 21:49:56
【问题描述】：

这是我的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;

还有我的Nav 组件：

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: block。我希望他们成为display: inline-block。但它不起作用。我试过在我自己的.scss 文件中使用引导程序，内联样式。但没有变化。可以帮忙吗？

【问题讨论】：

你试过用<ul className='list-group list-group-horizontal w-75 mx-auto'>吗？根据文档，list-group-horizontal 会将垂直列表项更改为水平。 [列表组 > 水平](
你试过display:flex或d-flex || dispaly:inline-flex 或 d-inline-flex。因为 flex 可以成为display:inline-block 的更好选择。除此之外，您无需任何额外的 css 即可管理不同的位置。
我已经尝试过d-inline-flex 和list-group-horizontal。 d-flex 不工作，list-group-horizontal 不是我想要的。我只想制作li 的内联块@terrymorse
您不能只添加display:inline-block 来列出组项目以强制它们水平显示。它不会有任何影响。使用 Bootstrap 提供的类。请参阅下面的答案。

标签： html css reactjs bootstrap-4

【解决方案1】：

将style="display: inline-block" 添加到 Bootstrap 列表组项目将没有效果，因为 Bootstrap list-group 使用弹性框，项目垂直（列）：

.list-group {
  display: flex;
  flex-direction: column;
}
.list-group-item {
  position: relative;
  display: block;
}

如果您希望列表组中的项目是水平的而不是垂直的，请将 list-group-horizontal 类添加到 list-group 元素，这会将默认的 list-group flex 方向从 column（垂直）更改为 @ 987654326@（横向）。

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/solid.min.css">
</head>

<body class="p-4">

  <h4>Existing Navbar</h4>

  <div class="navbar">
    <ul class="list-group w-75 mx-auto" style="background-color: #e0e0e0">
      <li class="list-group-item">
        <i class="fab fa-twitter" id="twitter"></i>
      </li>
      <!-- some items to stand in for Nav components -->
      <li onclick="alert('ambulance')" class="d-flex align-items-center list-group-item">
        <i class="fas fa-ambulance"></i>
      </li>
      <li onclick="alert('apple')" class="d-flex align-items-center list-group-item">
        <i class="fas fa-apple-alt"></i>
      </li>
      <li onclick="alert('baby carriage')" class="d-flex align-items-center list-group-item">
        <i class="fas fa-baby-carriage"></i>
      </li>
      <li onclick="alert('biking')" class="d-flex align-items-center list-group-item">
        <i class="fas fa-biking"></i>
      </li>
      <li class='mx-auto'>
        <button class='btn butn p-3'>Tweet</button>
      </li>
    </ul>
  </div>
</body>

请注意，列表组项目的方向是垂直的。

这是相同的 HTML 结果，添加了list-group-horizontal：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/solid.min.css">

<body class="p-4">

  <h4>Modified Navbar</h4>

  <p>Changes:</p>

  <ul>
    <li>Removed "d-flex" from all list group items (had no effect)</li>
    <li>Added "list-group-horizontal" to ul (puts all li elements on same line)
    </li>
  </ul>

  <div class="navbar">
    <ul class="list-group w-75 mx-auto list-group-horizontal" style="background-color: #e0e0e0">
      <li class="list-group-item">
        <i class="fab fa-twitter" id="twitter"></i>
      </li>
      <!-- some items to stand in for Nav components -->
      <li onclick="alert('ambulance')" class="align-items-center list-group-item">
        <i class="fas fa-ambulance"></i>
      </li>
      <li onclick="alert('apple-alt')" class="align-items-center list-group-item">
        <i class="fas fa-apple-alt"></i>
      </li>
      <li onclick="alert('baby-carriage')" class="align-items-center list-group-item">
        <i class="fas fa-baby-carriage"></i>
      </li>
      <li onclick="alert('biking')" class="align-items-center list-group-item">
        <i class="fas fa-biking"></i>
      </li>
      <li class='mx-auto'>
        <button class='btn butn p-3'>Tweet</button>
      </li>
    </ul>
  </div>
</body>

为了完整起见，这里是问题中的代码，list-group-horizontal 添加到 <ul>：

const Navbar = () => {
  return (
    <div className='Navbar'>
      <ul className='list-group w-75 mx-auto list-group-horizontal'>
        <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;

还有 Nav 组件，将 d-flex 从 <li> 中删除：

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

export default Nav;

【讨论】：

@ShahobiddinKhusniddinov 太好了，感谢您告诉我。