ブートストラップ4のドロップダウンが正しく配置されていない

debugcn 投稿 Dev

Mihirkumar Joshi

私は整列するのに多くの困難に直面しています

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>

ご覧のとおり、float：rightスタイルでstyle .caretを適用しようとしましたが、機能していません。

li要素でドロップダウン領域が展開されているときにアイテムを左に揃えようとしましたが、機能しません。

百合

キャレットの位置を編集するには.dropdown-toggle::after、@ Cuong Hoangまたは次のCSSを使用して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;
}

ここで作業フィドルを確認してください

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-08-13

コメントを追加

サインイン

分類Dev

ブートストラップ3のドロップダウン矢印がモバイルで正しく表示されない

分類Dev

ブートストラップ4：<td>のドロップダウンが表示されない

分類Dev

動的に作成されたブートストラップドロップダウンが正しく機能しない

分類Dev

'y'のスタイルが正しく変更されていないドロップダウンメニューをプロット

分類Dev

ブートストラップ4グリッドが正しく位置合わせされていない

分類Dev

ブートストラップグリッドの配置が正しく表示されない

分類Dev

ロード時にドロップダウン矢印が表示されないブートストラップメニューのドロップダウン

分類Dev

ブートストラップ4フィードバックテキストが正しくレンダリングされない

分類Dev

aspボタンとブートストラップドロップダウンでボタンの配置が設定されていません

分類Dev

ブートストラップ複数選択ドロップダウンリストが表示されない

分類Dev

ブートストラップドロップダウンリストが展開されない

分類Dev

ブートストラップ 4 列が正しくレイアウトされない

分類Dev

Laravelでブートストラップ4ドロップダウンが機能しない-Vueスパ

分類Dev

ドロップダウンボタンがブートストラップ4で機能しない

分類Dev

CSSドロップダウンメニュー-リストアイテムが正しく配置されていません

分類Dev

jqueryでビルドされたHTMLドロップダウンリストが正しく機能しない

分類Dev

ストラットタグのあるUIにSelect2ドロップダウンが正しく表示されない

分類Dev

ブートストラップグリッドが正しく位置合わせされていない

分類Dev

ブートストラッププッシュ/プル-Divが正しく配置されていません

分類Dev

Twitterブートストラップドロップダウンメニューが表示されない

分類Dev

ブートストラップドロップダウンメニューが表示されない

分類Dev

ブートストラップドロップダウンが機能しない（ただし、bootstrap.jsの前にjqueryが含まれています）

分類Dev

ブートストラップの小さなウィンドウのナビゲーションバードロップダウンが機能しない

分類Dev

Twitterブートストラップ、ナビゲーションバー、ドロップダウンが正しく機能しない

分類Dev

navbar のブーストストラップドロップダウンリストが機能しない

分類Dev

ブートストラップ4ドロップダウンが機能しない

分類Dev

ブートストラップコンテナが正しく中央に配置されていません

分類Dev

ブートストラップdatepickertandtimepickerグリフィコンが正しく配置されていません

分類Dev

ブートストラップ複数選択ドロップダウン.val（）が更新されない

Related 関連記事

記事