Группа кнопок Bootstrap 4, ширина текста кнопки выходит за пределы кнопки

Я создал простую группу переключателей в соответствии с документацией BS4. например, но всякий раз, когда я выбираю кнопку, я не могу не заметить, что граница активной кнопки немного выступает с правой стороны. Из того, что я могу сказать, кажется, что он пытается освободить место для «дополнительного» пустого пространства справа от ввода текста кнопки.

Такое же «выступание» вправо происходит на всех кнопках, выбранных в группе, а не только на центральной кнопке.

<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>

Когда выбрана центральная кнопка, правая граница выходит за правую сторону кнопки

Обратите внимание, как он совпадает с элементом ‹code›input#line‹/code›

Любые идеи, что может быть причиной этой проблемы с отображением?

Если это вас беспокоит, этот div группы кнопок внутри родительского div flexbox.


radio-button bootstrap-4 buttongroup
person Spectator6    schedule 02.12.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

просто примените 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>

Спасибо.

person KuldipKoradia    schedule 03.12.2019
comment
это полезно для вас? - person KuldipKoradia; 03.12.2019
comment
Добро пожаловать @spectator6 - person KuldipKoradia; 05.12.2019