个人中心
gpt4 book ai didi

css - 在右侧显示引导下拉菜单

转载 作者：行者123 更新时间：2023-11-28 16:55:45 24 4
gpt4 key购买 nike

我需要在右侧显示 Bootstrap 下拉菜单。当我将选项按钮放在表格行的末尾时，默认值如下所示:

enter image description here

但我需要将选项按钮放在行的开头，但它看起来像这样:

enter image description here

我已经在使用 dropdown-menu-right 但仍然无法正常工作。我的代码是这样的:

<div class="btn-group">
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="fa fa-caret-down"></span>
    </a>
    <ul class="dropdown-menu dropdown-menu-right text-right">
        <?php
            echo "<li><a class=\"open-AddRec\" data-pid=\"".$pid."\" data-sku=\"".$sku."\" data-pname=\"".$pname."\" data-pdesc=\"".$pdesc."\" data-unit=\"".$unit."\"  data-uprice=\"".$uprice."\" data-srpvat=\"".$srpvat."\" data-amt=\"".$amt."\" data-cost=\"".$cost."\" data-costvat=\"".$costvat."\" data-srp=\"".$srp."\" data-supp=\"".$supp."\" data-pack=\"".$pack."\" data-cat=\"".$cat."\" data-dater=\"".$dater."\" title=\"Add Receiving Record\" \"><i class=\"fa fa-arrow-circle-down\"></i> Add Receiving Record</a></li>";
            echo "<li><a class=\"open-AddDis\" data-pid=\"".$pid."\" data-sku=\"".$sku."\" data-pname=\"".$pname."\" data-pdesc=\"".$pdesc."\" data-unit=\"".$unit."\" data-pack=\"".$pack."\"  data-dated=\"".$dated."\" data-loc=\"".$loc."\" data-cat=\"".$cat."\" data-exp=\"".$exp."\" data-cost=\"".$cost."\" data-uprice=\"".$uprice."\" title=\"Add Dispatch Record\" \"><i class=\"fa fa-arrow-circle-up\"></i> Add Dispatch Record</a></li>";
            echo "<li><a class=\"open-AdjStock\" data-pid=\"".$pid."\" data-sku=\"".$sku."\" data-pname=\"".$pname."\" data-pdesc=\"".$pdesc."\" data-qty=\"".$qty."\" data-unit=\"".$unit."\" data-srpvat=\"".$srpvat."\" data-amt=\"".$amt."\" data-costvat=\"".$costvat."\" data-srp=\"".$srp."\" data-supp=\"".$supp."\" data-suppc=\"".$suppc."\" data-pack=\"".$pack."\" data-cat=\"".$cat."\" data-rl=\"".$rl."\" data-cl=\"".$cl."\" data-loc=\"".$loc."\" data-exp=\"".$exp."\" data-cby=\"".$cby."\" data-datec=\"".$datec."\" data-disc=\"".$disc."\" data-rem=\"".$rem."\" data-cost=\"".$cost."\" data-uprice=\"".$uprice."\"    data-now=\"".$now."\" title=\"Edit this row\" \"><i class=\"fa fa-clipboard fa-fw\"></i>Stock Adjustment</a></li>";
            echo "<li><a class=\"open-EditRow\" data-pid=\"".$pid."\" data-sku=\"".$sku."\" data-pname=\"".$pname."\" data-pdesc=\"".$pdesc."\" data-qty=\"".$qty."\" data-unit=\"".$unit."\" data-srpvat=\"".$srpvat."\" data-amt=\"".$amt."\" data-costvat=\"".$costvat."\" data-srp=\"".$srp."\" data-supp=\"".$supp."\" data-suppc=\"".$suppc."\" data-pack=\"".$pack."\" data-cat=\"".$cat."\" data-rl=\"".$rl."\" data-cl=\"".$cl."\" data-loc=\"".$loc."\" data-exp=\"".$exp."\" data-cby=\"".$cby."\" data-datec=\"".$datec."\" data-disc=\"".$disc."\" data-rem=\"".$rem."\" data-cost=\"".$cost."\" data-uprice=\"".$uprice."\"   title=\"Edit this row\" \"><i class=\"fa fa-pencil fa-fw\"></i>Edit</a></li>";
        ?>
    </ul>
</div>

我希望它显示如下:

enter image description here

最佳答案 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <section>
    <div class="container">
      <div class="row">
        <div class="col">
          <!-- Default dropright button -->
          <div class="btn-group dropbottom">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropright
            </button>
            <div class="dropdown-menu">
              <h6 class="dropdown-header">Dropdown header</h6>
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
            </div>
          </div>

          <!-- Split dropright button -->
          <div class="btn-group dropright">
            <button type="button" class="btn btn-secondary">
              Split dropright
            </button>
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="sr-only">Toggle Dropright</span>
            </button>
            <div class="dropdown-menu">
             <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 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>
</body>
</html>

希望您能在该片段中找到您的解决方案

关于css - 在右侧显示引导下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56982295/

24 4 0
文章推荐： html - 移动设备 (iOS) 上的 CSS 不透明度和转换中断超链接
文章推荐： javascript - React-Native 图像似乎已加载，但显示为空白
文章推荐： javascript - jquery .last() 仅单击最后一个元素一次时触发多次
文章推荐： CSS - Wordpress 将两个 iframe 与文本并排放置