Bootstrap 4 按钮组环绕修复边框半径

Question

如果这有什么不同，我正在使用 Bootstrap 4.3.1。

我有一个如下所示的按钮组：

<div class="row mt-3">
    <div class="col text-center">
        <div id="alphabetGroup" class="btn-group flex-wrap" role="group">
            <button id="btnHash" type="button" class="btn btn-outline-dark">#</button>
            <button id="btnA" type="button" class="btn btn-outline-dark">A</button>
            <button id="btnB" type="button" class="btn btn-outline-dark">B</button>
            <button id="btnC" type="button" class="btn btn-outline-dark">C</button>
            <button id="btnD" type="button" class="btn btn-outline-dark">D</button>
            <button id="btnE" type="button" class="btn btn-outline-dark">E</button>
            <button id="btnF" type="button" class="btn btn-outline-dark">F</button>
            <button id="btnG" type="button" class="btn btn-outline-dark">G</button>
            <button id="btnH" type="button" class="btn btn-outline-dark">H</button>
            <button id="btnI" type="button" class="btn btn-outline-dark">I</button>
            <button id="btnJ" type="button" class="btn btn-outline-dark">J</button>
            <button id="btnK" type="button" class="btn btn-outline-dark">K</button>
            <button id="btnL" type="button" class="btn btn-outline-dark">L</button>
            <button id="btnM" type="button" class="btn btn-outline-dark">M</button>
            <button id="btnN" type="button" class="btn btn-outline-dark">N</button>
            <button id="btnO" type="button" class="btn btn-outline-dark">O</button>
            <button id="btnP" type="button" class="btn btn-outline-dark">P</button>
            <button id="btnQ" type="button" class="btn btn-outline-dark">Q</button>
            <button id="btnR" type="button" class="btn btn-outline-dark">R</button>
            <button id="btnS" type="button" class="btn btn-outline-dark">S</button>
            <button id="btnT" type="button" class="btn btn-outline-dark">T</button>
            <button id="btnU" type="button" class="btn btn-outline-dark">U</button>
            <button id="btnV" type="button" class="btn btn-outline-dark">V</button>
            <button id="btnW" type="button" class="btn btn-outline-dark">W</button>
            <button id="btnX" type="button" class="btn btn-outline-dark">X</button>
            <button id="btnY" type="button" class="btn btn-outline-dark">Y</button>
            <button id="btnZ" type="button" class="btn btn-outline-dark">Z</button>
        </div>
    </div>
</div>

在桌面或任何具有足够宽屏幕的设备上查看时，它看起来像这样：

Alphabet Button Group

现在，当您使用较小的屏幕或移动设备时，它会环绕并看起来像这样：

Wrapped Button Group

我对它的外观很好，但是我想改变一些东西：

• 我可以使左上角（第一个按钮）和右下角（最后一个按钮）具有适当的圆角，但我如何对左下角和右上角的按钮进行此操作？根据窗口的宽度，按钮本身并不总是相同的，我不想强​​制组拆分（设置断点处的多个组等）。

这里有一个 JSFiddle 你可以玩。出于某种原因，它不像我自己的代码那样证明按钮是合理的，但这并不重要 - 如果您使结果窗格更薄，您可以看到按钮组换行，并且左侧应该与顶行对齐.如果您可以使第一行具有border-bottom-left-radius，那么类似的东西也应该能够应用于右上角。

https://jsfiddle.net/cglatot/yu6w4rkv/1/

Answer 1

#alphabetGroup button:first-child
  {
   border-radius: 8px 0 0 8px;
  }
  #alphabetGroup button:last-child
  {
    border-radius: 0 8px 8px 0;
  }

试试这样的..