文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在bootstrap下拉列表中定位插入符号

问如何在bootstrap下拉列表中定位插入符号
EN

Stack Overflow用户
提问于 2021-07-20 04:25:03
回答 2查看 20关注 0票数 1

我试图将插入符号定位到右边，这样当我选择一个选项时它就不会移动。

​

代码语言：javascript
复制
$('#dropdownMenu span').on('click', function() {
                $('#dropdownMenuButton').html($(this).text());
            });
代码语言：javascript
复制
#dropdownMenuButton {
  border: solid 1px black;
  background-color: white;
  box-shadow: none;
  width: 30vw;
  text-align:left;
}

#dropdownMenu {
  height: 50vh;
  overflow: hidden;
  overflow-y: auto;
  transform: translate3d(0px, 38px, 0px)!important;
  width: 30vw;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>

<head>
  <title>bootstrap dropdown</title>
  <link rel="stylesheet" href="https://www.sailwbob.com/bootstrap/bootstrap.min.css">
</head>

<body>
  <div class="dropdown">
    <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
                    Select boats
                </button>
    <div id='dropdownMenu' class="dropdown-menu" >
      <span class='dropdown-item'>Avrora</span>
      <span class='dropdown-item'>Irlbach</span>
      <span class='dropdown-item'>Laura</span>
      <span class='dropdown-item'>Lola </span>
      <span class='dropdown-item'>Syrena</span>
      <span class='dropdown-item'>Thea</span>
      <span class='dropdown-item'>Anne</span>
      <span class='dropdown-item'>Bebe</span>
      <span class='dropdown-item'>Camilla</span>
      <span class='dropdown-item'>Emma</span>
      <span class='dropdown-item'>Katy</span>
      <span class='dropdown-item'>Nelli</span>
      <span class='dropdown-item'>Winter</span>
      <span class='dropdown-item'>Aeolus</span>
      <span class='dropdown-item'>Amorina</span>
      <span class='dropdown-item'>Melina</span>
      <span class='dropdown-item'>Nieva</span>
      <span class='dropdown-item'>Nora</span>
      <span class='dropdown-item'>Rush</span>
      <span class='dropdown-item'>Alex</span>
      <span class='dropdown-item'>Blue J</span>
      <span class='dropdown-item'>Corker</span>
      <span class='dropdown-item'>DaCapo</span>
      <span class='dropdown-item'>Freedom</span>
      <span class='dropdown-item'>Golden</span>
      <span class='dropdown-item'>Montana</span>
      <span class='dropdown-item'>Moonshadow</span>
      <span class='dropdown-item'>Phoebe</span>
      <span class='dropdown-item'>Ra</span>
      <span class='dropdown-item'>Rigel</span>
      <span class='dropdown-item'>Santuzza</span>
      <span class='dropdown-item'>Sorccerer</span>
      <span class='dropdown-item'>Stiletto</span>
      <span class='dropdown-item'>Tony</span>
      <span class='dropdown-item'>Wasabi</span>
    </div>
  </div>
  <script src="https://www.sailwbob.com/bootstrap/jquery-3.3.1.slim.min.js"></script>
  <script src="https://www.sailwbob.com/bootstrap/bootstrap.bundle.min.js"></script>
</body>

</html>

​

popper.js
javascript
bootstrap-4
dropdown
EN

回答 2

Stack Overflow用户

发布于 2021-07-20 04:46:16

你需要把它固定在右边的绝对位置

代码语言：javascript
复制
#dropdownMenuButton {
    border: solid 1px black;
    background-color: white;
    box-shadow: none;
    width: 30vw;
    text-align: left;

    /* add relative position */
    position: relative;

}
#dropdownMenuButton::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;

    /* add these code */
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}
票数 0
EN

Stack Overflow用户

发布于 2021-07-20 04:59:28

添加以下内容：

..dropdown toggle：：after{margin top:1vw；float:right；}

​

代码语言：javascript
复制
$('#dropdownMenu span').on('click', function() {
                $('#dropdownMenuButton').html($(this).text());
            });
代码语言：javascript
复制
#dropdownMenuButton {
  border: solid 1px black;
  background-color: white;
  box-shadow: none;
  width: 30vw;
  text-align:left;
}

#dropdownMenu {
  height: 50vh;
  overflow: hidden;
  overflow-y: auto;
  transform: translate3d(0px, 38px, 0px)!important;
  width: 30vw;
}

.dropdown-toggle::after{
    margin-top:1vw;
    float:right;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>

<head>
  <title>bootstrap dropdown</title>
  <link rel="stylesheet" href="https://www.sailwbob.com/bootstrap/bootstrap.min.css">
</head>

<body>
  <div class="dropdown">
    <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
                    Select boats
                </button>
    <div id='dropdownMenu' class="dropdown-menu" >
      <span class='dropdown-item'>Avrora</span>
      <span class='dropdown-item'>Irlbach</span>
      <span class='dropdown-item'>Laura</span>
      <span class='dropdown-item'>Lola </span>
      <span class='dropdown-item'>Syrena</span>
      <span class='dropdown-item'>Thea</span>
      <span class='dropdown-item'>Anne</span>
      <span class='dropdown-item'>Bebe</span>
      <span class='dropdown-item'>Camilla</span>
      <span class='dropdown-item'>Emma</span>
      <span class='dropdown-item'>Katy</span>
      <span class='dropdown-item'>Nelli</span>
      <span class='dropdown-item'>Winter</span>
      <span class='dropdown-item'>Aeolus</span>
      <span class='dropdown-item'>Amorina</span>
      <span class='dropdown-item'>Melina</span>
      <span class='dropdown-item'>Nieva</span>
      <span class='dropdown-item'>Nora</span>
      <span class='dropdown-item'>Rush</span>
      <span class='dropdown-item'>Alex</span>
      <span class='dropdown-item'>Blue J</span>
      <span class='dropdown-item'>Corker</span>
      <span class='dropdown-item'>DaCapo</span>
      <span class='dropdown-item'>Freedom</span>
      <span class='dropdown-item'>Golden</span>
      <span class='dropdown-item'>Montana</span>
      <span class='dropdown-item'>Moonshadow</span>
      <span class='dropdown-item'>Phoebe</span>
      <span class='dropdown-item'>Ra</span>
      <span class='dropdown-item'>Rigel</span>
      <span class='dropdown-item'>Santuzza</span>
      <span class='dropdown-item'>Sorccerer</span>
      <span class='dropdown-item'>Stiletto</span>
      <span class='dropdown-item'>Tony</span>
      <span class='dropdown-item'>Wasabi</span>
    </div>
  </div>
  <script src="https://www.sailwbob.com/bootstrap/jquery-3.3.1.slim.min.js"></script>
  <script src="https://www.sailwbob.com/bootstrap/bootstrap.bundle.min.js"></script>
</body>

</html>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/68446608

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档