Как я могу исправить это расположение кнопок после обновления с bootstrap 4.1.3 до 4.5.0?

Question

Я нашел этот кодовый для простого макета кнопок Code Pad, который идеально соответствовал bootstrap 4.1.3:

After upgrading to bootstrap 4.5.0, the last row is unfortunately misaligned:

Can I fix this in bootstrap 4.5.0 or do I need to have a different approach like putting the buttons into a table or something?

Here's the raw HTML in case the link goes dead:

  1  2  3   4  5  6   7  8  9   <</button> 0  Go   

Answer 1

Вам просто нужно установить одинаковую ширину для каждого поля (кнопки). А поскольку btn-group > .btn имеет flex: 1 1 auto;, что означает, что они будут сжиматься при необходимости, вы можете безопасно установить для каждой кнопки ширину 50% или 100%:

<div class="btn-group-vertical ml-4 mt-4">
    <div class="btn-group">
        <input class="text-center form-control-lg mb-2" id="code">
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-secondary py-3 w-100">1</button>
        <button type="button" class="btn btn-outline-secondary py-3 w-100">2</button>
        <button type="button" class="btn btn-outline-secondary py-3 w-100">3</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-secondary py-3 w-100">4</button>
        <button type="button" class="btn btn-outline-secondary py-3 w-100">5</button>
        <button type="button" class="btn btn-outline-secondary py-3 w-100">6</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-secondary py-3 w-100">7</button>
        <button type="button" class="btn btn-outline-secondary py-3 w-100">8</button>
        <button type="button" class="btn btn-outline-secondary py-3 w-100">9</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-secondary py-3 w-100">&lt;</button>
        <button type="button" class="btn btn-outline-secondary py-3 w-100">0</button>
        <button type="button" class="btn btn-primary py-3 w-100" onclick="">Go</button>
    </div>
</div>

demo: https://jsfiddle.net/davidliang2008/dmch1590/16/

Если вы посмотрите на Bootstrap 4.1.3, то от 4.5.0 он отличается тем, что имеет:

.btn-group-vertical .btn {
    width: 100%;
}

Answer 2

Ширина была скорректирована содержимым. Вы можете просто использовать сетку, добавив класс col в каждую ячейку:

<div class="btn-group-vertical ml-4 mt-4" role="group" aria-label="Basic example">
    <div class="btn-group">
        <input class="text-center form-control-lg mb-2" id="code">
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-secondary py-3 col" onclick="document.getElementById('code').value=document.getElementById('code').value + '1';">1</button>
        <button type="button" class="btn btn-outline-secondary py-3 col" onclick="document.getElementById('code').value=document.getElementById('code').value + '2';">2</button>
        <button type="button" class="btn btn-outline-secondary py-3 col" onclick="document.getElementById('code').value=document.getElementById('code').value + '3';">3</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-secondary py-3 col" onclick="document.getElementById('code').value=document.getElementById('code').value + '4';">4</button>
        <button type="button" class="btn btn-outline-secondary py-3 col" onclick="document.getElementById('code').value=document.getElementById('code').value + '5';">5</button>
        <button type="button" class="btn btn-outline-secondary py-3 col" onclick="document.getElementById('code').value=document.getElementById('code').value + '6';">6</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-secondary py-3 col" onclick="document.getElementById('code').value=document.getElementById('code').value + '7';">7</button>
        <button type="button" class="btn btn-outline-secondary py-3 col" onclick="document.getElementById('code').value=document.getElementById('code').value + '8';">8</button>
        <button type="button" class="btn btn-outline-secondary py-3 col" onclick="document.getElementById('code').value=document.getElementById('code').value + '9';">9</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-secondary py-3 col" onclick="document.getElementById('code').value=document.getElementById('code').value.slice(0, -1);">&lt;</button>
        <button type="button" class="btn btn-outline-secondary py-3 col" onclick="document.getElementById('code').value=document.getElementById('code').value + '0';">0</button>
        <button type="button" class="btn btn-primary py-3 col" onclick="">Go</button>
    </div>
</div>

См. Этот код: https://www.codeply.com/p/S3Y4S3KwW3