Как я могу получить значок за сворачивающимся меню с помощью начальной загрузки 4?

Question

С переходом с начальной загрузки 3 к начальной загрузке элементы больше не выстраиваются.У меня есть поиск во всем Интернете для решения, но у меня сейчас нет вариантов (и терпение .. ха-ха)

Вот как это выглядит сейчас:

Мне бы хотелось, чтобы значок находился справа от текста.

Вот код:

<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>

Пожалуйста, помогите!

Answer 1

вот код для него:

<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/

Answer 2

Ваш код работает как положено.

<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);
}

---

Bootstrap не имеет 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, потому что дисплей list-group-item равен block, а не flex.flex-column работает только на flex элементах.