使用 Bootstrap 隐藏实际单选按钮的显示

Question

我正在尝试使用模态 class 显示的表单。

此单选切换按钮输出：

但是，我最终得到的是单选按钮显示在顶部并且对齐受到干扰的位置。

这个不需要的输出：

这是我的代码：

 <div class = "modal-body">
                    <form>
                        <div class = "row form-group">
                                  
                            <label class = "col-sm-2 form-check-label" for = "guestoptions"> Number of Guests</label>
                            <div class="form-check form-check-inline ">
                                <input class="form-check-input ml-3" type="radio" name="guestoptions" id="guest1" value="option1">
                                <label class="form-check-label" for="guest1">1</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="guestoptions" id="guest2" value="option2">
                                <label class="form-check-label" for="guest2">2</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="guestoptions" id="guest3" value="option3">
                                <label class="form-check-label" for="guest3">3</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="guestoptions" id="guest4" value="option4">
                                <label class="form-check-label" for="guest4">4</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="guestoptions" id="guest5" value="option5">
                                <label class="form-check-label" for="guest5">5</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="guestoptions" id="guest6" value="option6">
                                <label class="form-check-label" for="guest6">6</label>
                            </div>
                        </div> 

                        <div class = "row form-group">
                            
                            <label class = "col-sm-2 form-check-label" for = "section">Section</label>
                            
                            <input type="radio" class="btn-check" name="section" id="option1" autocomplete="off" checked>
                            <label class="btn btn-success" for="option1">Non-smoking</label>

                            <input type="radio" class="btn-check" name="section" id="option2" autocomplete="off">
                            <label class="btn btn-danger" for="option2">Smoking</label>

                        </div>


                        <div class=" row form-group">
                            <label class = "col-sm-2" for="dateandtime">Date and Time</label>
                            <div class = "col"><input type="date" class="form-control" id="dateandtime" name = "Date" placeholder="Enter Date"></div>
                            <div class = "col"><input type="time" class="form-control" id="dateandtime" name = "Time" placeholder="Enter Time"></div>
                        </div>
                          <button class = "btn btn-secondary offset-sm-2" style = "position: relative" data-dismiss="modal">Cancel</button>
                          <button class = "btn btn-primary offset-sm-2 " style = "position: relative">Reserve</button>
                     </form>

Answer 1

Bootstrap v4

您可以将 data-toggle="buttons" 添加到 .btn-group 元素并添加 .btn-group-toggle 来设置收音机输入的样式。查看 docs 了解更多信息。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-success active">
    <input
      type="radio"
      class="btn-check"
      name="section"
      id="option1"
      autocomplete="off"
      checked
    />
    Non-smoking
  </label>
  <label class="btn btn-outline-danger">
    <input
      type="radio"
      class="btn-check"
      name="section"
      id="option2"
      autocomplete="off"
    />
    Smoking
  </label>
</div>

Bootstrap v5

您可以使用 radio button groups.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="btn-group" role="group" aria-label="section preference">
  <input
    type="radio"
    class="btn-check"
    name="section"
    id="option1"
    autocomplete="off"
    checked
  />
  <label class="btn btn-outline-success" for="option1">
    Non-smoking
  </label>

  <input
    type="radio"
    class="btn-check"
    name="section"
    id="option2"
    autocomplete="off"
  />
  <label class="btn btn-outline-danger" for="option2">
    Smoking
  </label>
</div>

使用 Bootstrap 隐藏实际单选按钮的显示

Hiding Display of the actual radio button using Bootstrap

html

bootstrap-modal

bootstrap-4

Bootstrap v4

Bootstrap v5