代码之家 › 专栏 › 技术社区 › MariaT

如何使用bootstrap 4在折叠菜单后面获取徽章?

bootstrap-4 react-redux typescript css

MariaT · 技术社区 · 6 年前

随着从引导程序3迁移到引导程序4,项目不再排列。我已经在整个互联网上搜索了一个解决方案,但我现在没有选择了(还有耐心……哈哈)

这就是它现在的样子:

我想把徽章放在文字的右边。

代码如下:

<div className="list-group">
<a href="#Expamle" data-toggle="collapse" className="list-group-item list-group-item-action flex-column">Example
        <span className="badge badge-default badge-pill">3</span></a>

<div id="Expamle" className="collapse">
    <div className="d-flex w-100 justify-content-between">
        <label className="list-group-item list-group-item-action flex-column">Example list-item-1</label>
    </div>
    <div className="d-flex w-100 justify-content-between">
        <label className="list-group-item list-group-item-action flex-column">Example list-item-2</label>
    </div>
    <div className="d-flex w-100 justify-content-between">
        <label className="list-group-item list-group-item-action flex-column">Example list-item-3</label>
    </div>
</div>

请帮忙!

2 回复 | 直到 6 年前

mahan 6 年前

您的代码按预期工作。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<a href="#Expamle" data-toggle="collapse" class="list-group-item list-group-item-action flex-column">
  Example 
  <span class="badge badge-secondary badge-pill">3</span>
</a>


<div class="list-group">
  <a href="#Expamle" data-toggle="collapse" class="list-group-item list-group-item-action flex-column">Example
        <span class="badge badge-secondary badge-pill">3</span></a>

  <div id="Expamle" class="collapse">
    <div class="d-flex w-100 justify-content-between">
      <label class="list-group-item list-group-item-action flex-column">Example list-item-1</label>
    </div>
    <div class="d-flex w-100 justify-content-between">
      <label class="list-group-item list-group-item-action flex-column">Example list-item-2</label>
    </div>
    <div class="d-flex w-100 justify-content-between">
      <label class="list-group-item list-group-item-action flex-column">Example list-item-3</label>
    </div>
  </div>

我想你已经设定了一个固定的宽度 list-group-item 。因此,其内容包装是因为 display 是 block 。

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

引导程序没有 badge-default 班它只有以下几个类。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

使用它是无用的 flex-column 因为显示 列表组项目 是 块 不 flex 。 柔性柱 仅适用于 弯曲 元素。

Nikhil 6 年前

代码如下:

<div className="list-group">
    <a href="#Expamle" data-toggle="collapse" className="list-group-item list-group-item-action flex-column">Example
        <span class="badge">5</span></a>

    <div id="Expamle" className="collapse">
        <div className="d-flex w-100 justify-content-between">
            <label className="list-group-item list-group-item-action flex-column">Example list-item-1</label>
        </div>
        <div className="d-flex w-100 justify-content-between">
            <label className="list-group-item list-group-item-action flex-column">Example list-item-2</label>
        </div>
        <div className="d-flex w-100 justify-content-between">
            <label className="list-group-item list-group-item-action flex-column">Example list-item-3</label>
        </div>
    </div>

https://jsfiddle.net/xqbe1kwk/