Nieaktywny przycisk w button grupie, bootstrap.

Cześć wszystkim :)

Powoli uczę się wykorzystywania bootstrapowych rozwiązań. Mam potrzebę wyłączenia przycisku w pewnych warunkach i chcę go wyszarzyć poprzez parametr disabled.Użyłem rozwiązania wg zaleceń z getbootstrap: https://getbootstrap.com/docs/4.0/components/buttons/#disabled-state Kod wygląda tak:

<div class="form-group">
    <div class="form-buttons btn-group-vertical">
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1</button>
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1</button>
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1</button>
        <span class="d-inline-block" data-toggle="tooltip" title="text tooltipa">
            <button class="btn btn-primary btn-sm" disabled>nieaktywny</button>
        </span>
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1 długa naaaaazwaa</button>
    </div>
</div>

a efekt jest taki:

Moje pytanie: w jaki sposób zmodyfikować albo jakich klas użyć aby nieaktywny przycisk dorównywał do szerokości pozostałych w grupie? Nie bardzo wiem czego szukać. Z góry dziękuję za wszelkie wskazówki i pozdrawiam.

Tak na szybko spróbuj tak:

<div class="form-group">
    <div class="form-buttons btn-group-vertical">
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1</button>
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1</button>
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1</button>
        <span class="d-inline-block" data-toggle="tooltip" title="text tooltipa" style="width: 100%">
            <button class="btn btn-primary btn-sm" disabled>nieaktywny</button>
        </span>
        <button class="btn btn-primary btn-sm" onclick="">Przycisk 1 długa naaaaazwaa</button>
    </div>
</div>

Niestety bez zmian.

działa na pewno sprawdzałem w edytorze na ver BT4.1
https://www.w3schools.com/code/tryit.asp?filename=FXYZ4ALSLGK9
kliknij na RUN

Reczywiście, nawet jak zmieniłem wersję bootstrapa na moją (3.3.7) to działa. Mamy więc zagadkę czemu nie działa u mnie. Na dowód screen wraz ze źródłem:

Ehh, no cóż, do domu ci nie przyjadę i nie sprawdzę, więc chyba wychodzi na to, że musisz sam znaleźć rozwiązanie...

Ciekawa sprawa. U mnie zadziałały dwie możliwości - pierwsza to przerzucenie width: 100% do buttona jeśli korzystam ze znacznika span lub wywalenie spana całkowicie i przeniesienie tooltipa bezpośrednio na nieaktywny przycisk.

Na w3schools działa tylko opcja ostatnia, czyli wywalenie spana i umieszczenie tooltipa bezpośrednio na przycisku: https://www.w3schools.com/code/tryit.asp?filename=FXZIN57WDI48
Skąd się biorą takie rozbieżności? Zastanawia mnie to o tyle, że bootstrap w linku z pierwszego posta zalecał span, bo inaczej miało nie działać.

Nie wiem, może coś w css, span blokuje wartość width: 100% więc wywalenie pomaga, ale jest niezgodne z dokumentacją, tak czy siak to css, więc trzeba rzeźbić i sprawdzać w devtools, taka robota ;)

Nigdy nie miałem serca do css :D No to skoro zostawienie spana jest zgodne z dokumentacją to rozum mi podpowiada, żeby zostawić tę wersję. Z drugiej strony wywalenie spana powoduje, że przycisk się nie wyłamuje od reszty grupy - chodzi mi o zaokrąglenie narożników:
Jak widać na obrazku w przypadku użycia spana w środku grupy przycisk ma zaokrąglone rogi, a nie powinien. Czy na to jest jakiś sposób żeby jednocześnie został ten span?