Bootstrap 单选按钮组右浮动不起作用

jqjz2hbq  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(3)|浏览(187)

我试图对齐 Bootstrap 单选按钮组,但没有工作。我的代码块如下。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="info-box">
  <span class="info-box-icon bg-info"><i class="fas fa-shopping-cart"></i></span>

  <div class="info-box-content">
    <span class="info-box-text">Purchase</span>

    <div class="btn-group btn-group-toggle float-right" data-toggle="buttons" style="width:50%">
      <label class="btn btn-xs btn-success active">
        <input type="radio" name="options" id="option_a1" autocomplete="off" checked> Full Access
      </label>
      
      <label class="btn btn-xs btn-outline-secondary">
        <input type="radio" name="options" id="option_a2" autocomplete="off"> View Only
      </label>
      
      <label class="btn btn-xs btn-danger">
        <input type="radio" name="options" id="option_a3" autocomplete="off"> Restricted
      </label>
    </div>
  </div>
</div>
apeeds0o

apeeds0o1#

将 Bootstrap 链接到头部并尝试

<div class="info-box-content">
            <span class="info-box-text">Purchase</span>

            <div class="btn-group btn-group-toggle float-right" data-toggle="buttons" style="width:50%">
              <label class="btn btn-xs btn-success active">
                <input type="radio" name="options" id="option_a1" autocomplete="off" checked> Full Access
              </label>
              <label class="btn btn-xs btn-outline-secondary">
                <input type="radio" name="options" id="option_a2" autocomplete="off"> View Only
              </label>
              <label class="btn btn-xs btn-danger">
                <input type="radio" name="options" id="option_a3" autocomplete="off"> Restricted
              </label>
            </div>
           
          </div>
        
        </div>
ktca8awb

ktca8awb2#

您的代码正在运行。可能您没有正确链接 Bootstrap 。
试试这个:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="info-box">
    <span class="info-box-icon bg-info"><i class="fas fa-shopping-cart"></i></span>
    <div class="info-box-content">
      <span class="info-box-text">Purchase</span>
      <div class="btn-group btn-group-toggle float-right" data-toggle="buttons" style="width:50%">
        <label class="btn btn-xs btn-success active">
          <input type="radio" name="options" id="option_a1" autocomplete="off" checked> Full Access
        </label>
        <label class="btn btn-xs btn-outline-secondary">
          <input type="radio" name="options" id="option_a2" autocomplete="off"> View Only
        </label>
        <label class="btn btn-xs btn-danger">
          <input type="radio" name="options" id="option_a3" autocomplete="off"> Restricted
        </label>
      </div>               
    </div>           
  </div>
lztngnrs

lztngnrs3#

您可以在Bootstrap v4中试用此功能吗

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
<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://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row ">
  <div class="form-group col-lg-6">
    <div class="d-flex justify-content-between">

      <div class="info-box-content">
        <span class="info-box-icon bg-info"><i class="fas fa-shopping-cart"></i></span>
        <span class="info-box-text">Purchase</span>
      </div>
      <div class="btn-group btn-group-toggle" data-toggle="buttons">

        <label class="btn btn-secondary active">
          <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
        </label>
        <label class="btn btn-secondary">
          <input type="radio" name="options" id="option2" autocomplete="off"> Radio
        </label>
        <label class="btn btn-secondary">
          <input type="radio" name="options" id="option3" autocomplete="off"> Radio
        </label>
      </div>

    </div>

  </div>

</div>

相关问题