Question

<li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DROPDOWN <span class="caret"></span></a>
                  <ul class="dropdown-menu menu-multicolumn">
                        <li class="menu-column">
                            <ul>
                                <li class="menu-column-title">Multi Page</li>
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something here</a></li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">Separated link</a></li>

                            </ul>
                        </li>
                        <li class="menu-column">
                            <ul>
                                <li class="menu-column-title"></li>
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something here</a></li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">Separated link</a></li>

                            </ul>
                        </li>
                        <li class="menu-column">
                            <ul>
                                <li class="menu-column-title">One Page</li>
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something here</a></li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                        <li class="menu-column">
                            <ul>
                                <li class="menu-column-title"></li>
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something here</a></li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                  </ul>
                </li><!-- End of dropdown -->

的CSS

 .dropdown-menu {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
display: none;
float: left;
font-size: 14px;
list-style: outside none none;
margin: 2px 0 0;
min-width: 160px;
padding: 5px 0;
position: absolute;
text-align: left;
top: 100%;
z-index: 1000;}

.menu-multicolumn {
white-space: nowrap;
width: auto !important;}

.menu-column {
display: inline-block;
float: none;
overflow: hidden;
vertical-align: top;
white-space: normal;
min-width: 190px;}

好的，所以现在我想用javascript来确定多少.dropdown-menu元素超出窗口宽度然后设置与左边相同的宽度： - （那个宽度）;所以.dropdown-menu元素将有灵活的左侧位置，始终在窗口宽度内。

基本上我需要确定多少元素超出窗口宽度，然后将相同的数量设置为相同元素的负左绝对位置。

Answer 1

也许它的想法太简单了，但如果我找到了正确的方法，并且你总是希望右侧留在你的视口中，你可以简单地这样做：

.dropdown-menu {
   position: absolute;
   right: 0px;
   left: auto;
}

您可以简单地将右侧的空间设置为零，而不是计算您应该将左侧推到负边距的数量！

在视口或窗口宽度中保留绝对元素（下拉菜单）

1 个答案: