如何在引导程序下拉列表中定位插入符号

Question

I'm trying to position the caret to the right so it doesn't move when I select an option.我试图将插入符号向右放置，这样当我选择一个选项时它就不会移动。

 $('#dropdownMenu span').on('click', function() { $('#dropdownMenuButton').html($(this).text()); });

 #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; }

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

Answer 1

you need to fix it on the right side with absolute position您需要将其固定在具有绝对位置的右侧

#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%);
}

Answer 2

adding the following:添加以下内容：

.dropdown-toggle::after{ margin-top:1vw; .dropdown-toggle::after{ margin-top:1vw; float:right;浮动：右； } }

 $('#dropdownMenu span').on('click', function() { $('#dropdownMenuButton').html($(this).text()); });

 #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; }

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

如何在引导程序下拉列表中定位插入符号

问题描述

2 个解决方案

解决方案1
0 2021-07-19 20:46:15

解决方案2
0 2021-07-19 20:59:27

如何在引导程序下拉列表中定位插入符号

问题描述

2 个解决方案

解决方案1 0 2021-07-19 20:46:15

解决方案2 0 2021-07-19 20:59:27

解决方案1
0 2021-07-19 20:46:15

解决方案2
0 2021-07-19 20:59:27