在右侧显示引导程序下拉菜单

时间：2019-07-11 05:42:59

标签： css bootstrap-4

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

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

4 个答案:

答案 0 :(得分：2)

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

希望您会在该代码段中找到解决方案

答案 1 :(得分：0)

将.dropdown类添加到父div 

  <div class="btn-group dropdown">
                           <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>

答案 2 :(得分：0)

您可以尝试一下。加载设置图标需要一些时间。希望对您有帮助。

#ico-wrapper {
  color: #fff;
  margin-right: 10px;
}

.btn-settings {
  background-color: #95c0e2 !important;
  color: #fff !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/411a1ecc41.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="btn-group">
  <button type="button" class="btn btn-settings dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span id="ico-wrapper"><i class="fas fa-cog"></i></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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>
</div>

答案 3 :(得分：0)

Bootstarp-4具有三个基于方向的菜单类，分别是.dropup，dropleft和dropright。 只有在应该显示菜单的一侧有足够的空间时，它们才起作用。例如，.dropright仅在右侧有足够的空间时才起作用。否则，菜单将显示在左侧。

  通过添加以下元素右侧的

Trigger下拉菜单   .dropright到父元素。 -Bootstrap 

body {
  padding-top: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 <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>


<div class="container my-5">
  <div class="row">
    <div class="col">
      <div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" 
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <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>
      </div>
    </div>
        <div class="col">
      <div class="dropup">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" 
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropup
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <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>
      </div>
    </div>
    <div class="col">
      <div class="dropright">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" 
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropright
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <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>
      </div>
    </div>
    <div class="col">
      <div class="dropleft">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" 
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropleft
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <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>
      </div>
    </div>
   
  </div>
</div>

相关问题
最新问题