0
サブメニュー付きのブートストラップ4メニューがあります。メニューメニューの右側にサブメニューが表示されます。サブメニューを右にではなく左に表示する方法
ただし、メニューは画面の右端にあります。メニューは右側に切り取られています。
メインメニューの左側にメニューを表示する方法はありますか？
HTML：
<div class="dropdown dropdown-user-menu">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical"></span>
</button>
<div class="dropdown dropdown-menu dropdown-typical dropdown-menu-right">
<a repeat.for="item of statusTypes" click.delegate="editProgramStatus(item)" class="dropdown-item">${item.name}</a>
<div class="dropdown-divider"></div>
<div class="dropdown-more">
<div class="dropdown-more-caption">Choose color...</div>
<div class="dropdown-more-sub">
<div class="dropdown-more-sub-in">
<a class="dropdown-item" href="#"><span class="font-icon font-icon-home"></span>Quant and Verbal</a>
<a class="dropdown-item" href="#"><span class="font-icon font-icon-cart"></span>Real Gmat Test</a>
<a class="dropdown-item" href="#"><span class="font-icon font-icon-speed"></span>Prep Official App</a>
<a class="dropdown-item" href="#"><span class="font-icon font-icon-users"></span>CATprer Test</a>
<a class="dropdown-item" href="#"><span class="font-icon font-icon-comments"></span>Third Party Test</a>
</div>
</div>
</div>
</div>
</div>
CSS：
.dropdown-menu {
border-color: #d8e2e7;
margin-top: 6px;
font-size: 0.8125rem /*13/16*/;
}
.dropup .dropdown-menu {
margin-bottom: 6px;
}
.dropdown-menu-col {
float: left;
width: 50%;
}
.dropdown-header,
.dropdown-item {
padding: 4px 12px;
}
.dropdown-header {
text-transform: uppercase;
font-weight: 600;
color: #6c7a86;
font-size: 0.875rem /*14/16*/;
}
.dropdown-item {
font-size: 0.9375rem /*15/16*/;
}
.dropdown-item .font-icon {
margin: 0 8px 0 0;
color: #adb7be;
transition: all 0.2s ease-in-out;
font-size: 16px;
vertical-align: middle;
line-height: 16px;
position: relative;
top: -1px;
}
.dropdown-item:hover,
.dropdown-item.current {
background: none;
color: #00a8ff;
}
.dropdown-item:hover .font-icon,
.dropdown-item.current .font-icon {
color: #00a8ff;
}
.dropdown-item.no-nowrap {
white-space: normal;
line-height: 1.3;
}
.dropdown.dropdown-typical {
position: relative;
}
.dropdown.dropdown-typical a.dropdown-toggle {
color: #343434;
font-weight: 600;
padding-right: 15px;
padding-left: 15px;
}
.dropdown.dropdown-typical a.dropdown-toggle:after,
.dropdown.dropdown-typical a.dropdown-toggle .font-icon {
transition: all 0.2s ease-in-out;
}
.dropdown.dropdown-typical a.dropdown-toggle:after {
color: #adb7be;
border-top: 5px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
position: relative;
top: -1px;
}
.dropdown.dropdown-typical a.dropdown-toggle .font-icon {
vertical-align: middle;
margin: 0 6px 0 0;
color: #adb7be;
font-size: 16px;
line-height: 16px;
position: relative;
top: -1px;
}
.dropdown.dropdown-typical a.dropdown-toggle.dropdown-toggle-txt {
font-weight: 400;
color: #00a8ff;
font-size: 0.9375rem /*15/16*/;
}
.dropdown.dropdown-typical a.dropdown-toggle.dropdown-toggle-txt:after {
display: none;
}
.dropdown.dropdown-typical.open a.dropdown-toggle,
.dropdown.dropdown-typical a.dropdown-toggle:hover {
color: #00a8ff;
}
.dropdown.dropdown-typical.open a.dropdown-toggle:after,
.dropdown.dropdown-typical a.dropdown-toggle:hover:after,
.dropdown.dropdown-typical.open a.dropdown-toggle .font-icon,
.dropdown.dropdown-typical a.dropdown-toggle:hover .font-icon {
color: #00a8ff;
}
.dropdown.dropdown-typical .dropdown-header,
.dropdown.dropdown-typical .dropdown-item {
padding: 3px 14px;
}
.dropdown.dropdown-typical .dropdown-item {
font-size: 0.9375rem /*15/16*/;
}
.dropdown.dropdown-typical .dropdown-menu {
margin-top: 2px;
min-width: 100%;
}
.dropdown.dropdown-typical .dropdown-more {
position: relative;
}
.dropdown.dropdown-typical .dropdown-more .dropdown-more-caption {
padding: 3px 12px;
transition: all 0.2s ease-in-out;
cursor: pointer;
position: relative;
font-size: 15px;
}
.dropdown.dropdown-typical .dropdown-more .dropdown-more-caption:before {
content: '';
display: block;
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 5px;
border-color: transparent transparent transparent #adb7be;
transition: all 0.2s ease-in-out;
}
.dropdown.dropdown-typical .dropdown-more .dropdown-more-caption.padding {
padding-left: 37px;
}
.dropdown.dropdown-typical .dropdown-more .dropdown-more-sub {
display: none;
position: absolute;
top: -4px;
left: 100%;
padding: 0 0 0 4px;
margin: 0 0 0 -3px;
}
.dropdown.dropdown-typical .dropdown-more .dropdown-more-sub-in {
background: #fff;
border: solid 1px #d8e2e7;
border-left: none;
border-radius: 0 3px 3px 0;
padding-top: 4px;
padding-bottom: 4px;
}
.dropdown.dropdown-typical .dropdown-more:hover .dropdown-more-caption {
color: #00a8ff;
}
.dropdown.dropdown-typical .dropdown-more:hover .dropdown-more-caption:before {
border-left-color: #00a8ff;
}
.dropdown.dropdown-typical .dropdown-more:hover .dropdown-more-sub {
display: block;
}
.dropdown.dropdown-status {
display: inline-block;
}
.dropdown.dropdown-status .btn.dropdown-toggle {
height: 22px;
font-size: 0.8125rem /*13/16*/;
padding: 0 7px;
}
.dropdown.dropdown-status .btn.dropdown-toggle.btn-danger {
background-color: #fa424a !important;
border-color: #fa424a !important;
}
.dropdown.dropdown-status .btn.dropdown-toggle.btn-primary {
background-color: #00a8ff !important;
border-color: #00a8ff !important;
}
.dropdown.dropdown-status .btn.dropdown-toggle.btn-success {
background-color: #46c35f !important;
border-color: #46c35f !important;
}
.dropdown.dropdown-status .btn.dropdown-toggle.btn-warning {
background-color: #f29824 !important;
border-color: #f29824 !important;
}
.dropdown.dropdown-status .dropdown-menu {
margin-left: -5px;
}
.dropdown.dropdown-status .dropdown-menu a.dropdown-item {
font-weight: 400;
border: none;
}
.dropdown-toggle .caret {
display: none;
}
編集：私はこれがうまく機能しました。マイナス95％に委ねセット：
<div style="left: -95%;" class="dropdown-more-sub">
<div class="dropdown-more-sub-in">
<a class="dropdown-item" href="#"><span class="font-icon font-icon-home"></span>Quant and Verbal</a>
<a class="dropdown-item" href="#"><span class="font-icon font-icon-cart"></span>Real Gmat Test</a>
<a class="dropdown-item" href="#"><span class="font-icon font-icon-speed"></span>Prep Official App</a>
<a class="dropdown-item" href="#"><span class="font-icon font-icon-users"></span>CATprer Test</a>
<a class="dropdown-item" href="#"><span class="font-icon font-icon-comments"></span>Third Party Test</a>
</div>
</div>
これは意味があり、私はそれを試みましたが、実際にはサブメニューの位置は変わりません。 –
"整列 デフォルトでは、ドロップダウンメニューは、親の左側と上部から100％自動的に配置されます。ドロップダウンメニューを右にドラッグダウンメニューに追加すると、ドロップダウンメニューが右揃えになります。 そのクラスを削除することもできます。dropdown-menu-right –
追加したばかりの編集をご覧ください。左に設定することで、私はそれを動かすことができました。しかし、これはハックのように思えます。私はドロップダウンメニューを得るようには思えませんでした。 –