css 浮动标签在Bootstrap 5中的datalist输入上看起来不正确

0ejtzxu1 于 2023-05-19 发布在 Bootstrap

关注(0)|答案(2)|浏览(245)

在Bootsrap 5中，有没有一种方法可以让浮动标签在datalist中正确显示？这就是现在的情况没有浮动窗体类也能正常工作，但我想使用浮动窗体。

<div class="form-floating">
                    <label for="exampleDataList" class="form-label">Datalist example</label>
                    <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
                    <datalist id="datalistOptions">
                        <option value="San Francisco">
                        <option value="New York">
                        <option value="Seattle">
                        <option value="Los Angeles">
                        <option value="Chicago">
                    </datalist>
                </div>

enter image description here

css

来源：https://stackoverflow.com/questions/75569574/floating-label-doesnt-look-right-on-datalist-input-in-bootstrap-5

2条答案

按热度按时间

ql3eal8s1#

我还没有深入分析原因，但是如果将label元素移到末尾，似乎可以正常工作。

<div class="form-floating">
    <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
    <datalist id="datalistOptions">
        <option value="San Francisco">
        <option value="New York">
        <option value="Seattle">
        <option value="Los Angeles">
        <option value="Chicago">
    </datalist>
    <label for="exampleDataList" class="form-label">Datalist example</label>
</div>

赞(0）回复(0）举报 2023-05-19

t2a7ltrp2#

将标签放在输入字段之后。下面是更新后的代码。试试这个：-

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

                <div class="form-floating">
                    <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
                    <label for="exampleDataList" class="form-label">Datalist example</label>
                    <datalist id="datalistOptions">
                        <option value="San Francisco">
                        <option value="New York">
                        <option value="Seattle">
                        <option value="Los Angeles">
                        <option value="Chicago">
                    </datalist>
                </div>

赞(0）回复(0）举报 2023-05-19

我来回答

css 浮动标签在Bootstrap 5中的datalist输入上看起来不正确

2条答案

相关问题

热门标签

最新问答