[英]Bootstrap 4 Button Group wrapping fix border-radius
I'm using Bootstrap 4.3.1 if that makes any difference.如果这有什么不同,我正在使用 Bootstrap 4.3.1。
I have a button group that looks like this:我有一个看起来像这样的按钮组:
<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>
When looking on desktop, or any device that has a wide enough screen, it looks like this:在桌面或任何具有足够宽屏幕的设备上查看时,它看起来像这样:
Now, when you go to a smaller screen, or mobile, it wraps around and instead looks like this:现在,当您转到较小的屏幕或移动设备时,它会环绕并显示如下:
I'm fine with how this looks, however there is something I would like to change:我对它的外观很好,但是我想改变一些东西:
Here's a JSFiddle you can play around with.这是您可以玩的 JSFiddle。 For some reason it doesn't justify the buttons like in my own code, but it doesn't really matter - if you make the results pane thinner you can see the button group wrap, and the left side should be justified with the top line.
出于某种原因,它不像我自己的代码那样证明按钮的合理性,但这并不重要 - 如果您使结果窗格更薄,您可以看到按钮组换行,并且左侧应该与顶行对齐. If you can make that first line have border-bottom-left-radius then something similar should be able to be applied to the top right as well.
如果您可以使第一行具有border-bottom-left-radius,那么类似的东西也应该能够应用于右上角。
https://jsfiddle.net/cglatot/yu6w4rkv/1/ https://jsfiddle.net/cglatot/yu6w4rkv/1/
#alphabetGroup button:first-child
{
border-radius: 8px 0 0 8px;
}
#alphabetGroup button:last-child
{
border-radius: 0 8px 8px 0;
}
try something like this..尝试这样的事情..
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.