Bootstrap 4个按钮组，按钮文本宽度超出按钮边界

Question

我已经创建了一个简单的单选按钮组 per the BS4 documentation example，但是每当我 select 一个按钮时，我会情不自禁地注意到活动按钮的边框向右突出了一点边。据我所知，它似乎试图为按钮输入文本右侧的 "extra" 空白 space 腾出空间。

右侧的 "jutting out" 出现在组内 select 的所有按钮上，而不仅仅是中间按钮。

<div id="image-viewer-controls-wrapper">
  ...  

  <div class="btn-group btn-group-toggle" data-toggle="buttons" id="crop-type">
    <label class="btn btn-primary active">
      <input type="radio" name="crop_type" id="box" autocomplete="off" checked> Box
    </label>

    <label class="btn btn-primary">
      <input type="radio" name="crop_type" id="line" autocomplete="off"> Line
    </label>

    <label class="btn btn-primary">
      <input type="radio" name="crop_type" id="split" autocomplete="off"> Split
    </label>
  </div>
</div>

任何可能导致此显示问题的想法？

如果有任何问题，这个按钮组 div 在 flexbox 父级 div 中。

Answer 1

只需按照以下代码段将 CSS 应用于单选按钮。不用担心 display:none CSS 属性您的收音机功能会正常工作，不会对您的功能造成任何问题。

希望你的问题得到解决

.btn-group-toggle>.btn input[type=radio] {
    display: none;
}

<!DOCTYPE html>
<html>
<head>
 <title>Demo Page</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
</style>
<body>
 <div id="image-viewer-controls-wrapper">
  <div class="btn-group btn-group-toggle" data-toggle="buttons" id="crop-type">
   <label class="btn btn-primary active">
    <input type="radio" name="crop_type" id="box" autocomplete="off" checked> Box
   </label>
   <label class="btn btn-primary">
    <input type="radio" name="crop_type" id="line" autocomplete="off"> Line
   </label>
   <label class="btn btn-primary">
    <input type="radio" name="crop_type" id="split" autocomplete="off"> Split
   </label>
  </div>
 </div>
</body>
</html>

谢谢。

Bootstrap 4个按钮组，按钮文本宽度超出按钮边界

Bootstrap 4 button group, button text width extends outside of button boundary

bootstrap-4

radio-button

buttongroup