个人中心
gpt4 book ai didi

html - bootstrap 4 下拉没有右对齐

转载 作者：太空宇宙 更新时间：2023-11-04 00:58:05 24 4
gpt4 key购买 nike

enter image description here我在对齐方面遇到了很多困难

1)下拉菜单中的插入符号到右侧下拉菜单的末尾。

2 当下拉列表展开时，我无法将元素左对齐。

标记是为了说明问题

这里给出了完整的代码。

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"/>
<style>
.multiselect.dropdown-toggle.btn {
    text-align: left;
    font-size:10px;
    height:30px;
    border-radius:0px;
    background-color:white;
    outline: none;
    border-color:black
    }


   .dropdown-menu{
       font-size:9px
    }
    .btn .caret {
    position: absolute;
    right: 10px;
    top: 10px;
    }

</style>
</head>

<div style="display:inline-block">
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:100px;margin-left:10px;font-size:10px" value="Select"/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:100px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:150px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:200px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:150px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:150px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:100px;font-size:10px" value="Select "/>
  <input type="text" style="background-color:grey;border:1px;height:25px;color:white;text-align:center;width:120px;font-size:10px" value="Select "/>  
<div>
<div style="display:inline-block">
<span style="margin-left:10px" />
<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started1" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started2" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started3" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started4" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started5" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started6" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<select id="example-getting-started7" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>



<div>
<script>
  $(document).ready(function (){
    $('#example-getting-started').multiselect({
       buttonWidth: '100px',
       includeSelectAllOption: true
    });

    $('#example-getting-started1').multiselect({
       buttonWidth: '100px',
       includeSelectAllOption: true
    });
    $('#example-getting-started2').multiselect({
       buttonWidth: '150px',
       includeSelectAllOption: true
    });
    $('#example-getting-started3').multiselect({
       buttonWidth: '200px',
       includeSelectAllOption: true
    });
    $('#example-getting-started4').multiselect({
       buttonWidth: '150px',
       includeSelectAllOption: true
    });
    $('#example-getting-started5').multiselect({
       buttonWidth: '150px',
       includeSelectAllOption: true
    });
    $('#example-getting-started6').multiselect({
       buttonWidth: '100px',
       includeSelectAllOption: true
    });
    $('#example-getting-started7').multiselect({
       buttonWidth: '120px',
       includeSelectAllOption: true
    });
  }
  );
</script>

如您所见，我尝试将样式 .caret 与 float:right 样式一起应用，但它不起作用。

当下拉区域在 li 元素中展开时，我尝试将元素左对齐，但它不起作用。

最佳答案

为了编辑插入符位置，您需要修复 .dropdown-toggle::after CSS，使用@Cuong Hoang 或以下 CSS，它们都可以工作。如果您不希望其他插入符号重新定位，请记住正确指向所需的 .dropdown-toggle。

.btn.multiselect.dropdown-toggle::after {
    float: right;
    margin-right: 0;
    margin-top: 7px;
}

同时，为了修复每个下拉列表中的复选框对齐方式，您必须修复每个标签的填充。

.multiselect-container > li > a > label {
  padding: 3px; 20px 3px 0;
}

检查工作 fiddle here

关于html - bootstrap 4 下拉没有右对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54086441/

24 4 0
文章推荐： python - abs(v) 比 python 中的 (v + mask) ^ mask 快？
文章推荐： python - 如何去除和大写从 Excel 文件派生的数据框中的列——避免 unicode/str 错误消息
文章推荐： python - Django Rest Framework如何自定义ListAPIView
文章推荐： html - 什么是 28"显示器的 CSS @media 查询？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com