float bootstrap 内容上方和侧边栏主菜单右侧的下拉列表

Question

我不知道如何移动下拉列表以使其位于主菜单的右侧。请查看我想要实现的屏幕截图。 http://i.imgur.com/nlAJgaC.png

这是代码

<div id="sidebar-left" class="col-xs-2 col-sm-2 hidden-lg">
    <ul class="nav main-menu">
        <li>
            <a href="#" class="align-center">
                <i class="fa fa-dashboard"></i>
                <span class="adClass hidden-xs">Menu 1</span>
            </a>
        </li>
        <li class="dropdown">
            <a class="align-center dropdown-toggle">
                <i class="fa fa-print"></i>
                <span class="adClass hidden-xs">Odometer</span>
            </a>
            <ul class="dropdown-menu">
                <li><a ng-click="stopIt($event, 'submenu1')">submenu1</a></li>
                <li><a ng-click="stopIt($event, 'submenu2')">submenu2</a></li>
                <li><a ng-click="stopIt($event, 'submenu3')">submenu3</a></li>
                <li><a ng-click="stopIt($event, 'submenu4')">submenu4</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="align-center">
                <i class="fa fa-mobile"></i>
                <span class="adClass hidden-xs">Menu 2</span>
            </a>
        </li>
        <li>
            <a href="#" class="align-center">
                <i class="fa fa-flask"></i>
                <span class="adClass hidden-xs">Menu 3</span>
            </a>
        </li>
        <li>
            <a href="#" class="align-center">
                <i class="fa fa-bar-chart-o"></i>
                <span class="adClass hidden-xs">Menu 4</span>
            </a>
        </li>
        <li>
            <a href="#" class="align-center">
                <i class="fa fa-cogs"></i>
                <span class="adClass hidden-xs">Menu 5</span>
            </a>
        </li>
        <li>
            <a href="#" class="align-center">
                <i class="fa fa-clipboard"></i>
                <span class="adClass hidden-xs">Menu 6</span>
            </a>
        </li>
    </ul>
</div>

Answer 1

Bootstrap 下拉菜单使用 position: absolute; 因此您只需要将它向左移动，例如：

.dropdown-menu { left: 106px; }基本够用了

Answer 2

在 AngularJS 的帮助下，我终于成功了。效果很好

var captureWidthOfSideBar = function() {
    $rootScope.widthSideBar = (document.getElementById('left-sidebarId').offsetWidth + 10).toString() + "px";
};
captureWidthOfSideBar();

var resizeTimeout;
$(window).resize(function() {
    if (resizeTimeout) {
        $timeout.cancel(resizeTimeout);
    }

    resizeTimeout = $timeout(function() {
        $scope.$apply(function() {
            captureWidthOfSideBar();
        });
    }, 500);
});

然后在我的模板上，它是这样命名的

<ul id="ddPrinterAnalytics" class="dropdown-menu" ng-style="{left : $root.widthSideBar}">
    <li><a ng-click="stopIt($event, 'main.odometer')">Odometers</a></li>
    <li><a ng-click="stopIt($event, 'login')">Real Time Print Job</a></li>
    <li><a href="#">Battery</a></li>
    <li><a href="#">Printhead</a></li>
</ul>

哇哦！！！ :)

float bootstrap 内容上方和侧边栏主菜单右侧的下拉列表

float bootstrap dropdown list above content and right side of the sidebar main menu

css

sidebar

twitter-bootstrap

twitter-bootstrap-3