Question

我在对齐时面临很多困难

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元素中的下拉区域扩大时，我尝试将项目向左对齐，但是它不起作用。

Answer 1

要编辑插入符位置，您需要使用@Cuong Hoang或以下CSS来修复.dropdown-toggle::after 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;
}

检查工作提琴here

Answer 2

来吧！

您不能对此使用text-align，因为bootstrap的默认实现在很大程度上限制了它，所以简单的解决方案就是这样自定义的。我不知道还有其他比这更容易解释的方法。

.dropdown-toggle {
    position: relative;
}

.dropdown-toggle::after {
    position: absolute;
    right: 12px;
    top: 13px;
}

.multiselect-container  > li {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 5px !important;
}

.multiselect-container  > li > a > label {
    padding: 0px !important;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.multiselect-container  > li > a > label > input {
    margin: 0px !important;
}

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

bootstrap 4下拉不正确对齐

2 个答案: