Question

好的，我有这个小提琴：https://jsfiddle.net/9jb3Lp4k/。我的问题是，在小型设备上，当我将鼠标悬停在左侧菜单上时，我的右侧菜单会显示下方。我可以修复它，以便我获得正确的内容。有什么建议吗？

<nav class="navbar navbar-inverse sidebar" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <span class="navbar-brand"> <img src="{{asset('/assetsfront/img/night-life.png')}}"></span>


        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="user-info">
                <img src="{{asset('/assetsfront/img/defaultuser.png')}}">
                <span class="username">username</span>
            </div>



        <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
            <ul class="nav navbar-nav">
            <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Galerija<span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity fa fa-picture-o"></span></a>
                    <ul class="dropdown-menu forAnimate" role="menu">
                        <li><a href="/user/profile">Pregledaj galerije <span style="font-size:18px;" class="pull-right hidden-xs showopacity fa fa-eye"></span></a></li>
                        <li><a href="/gallery/add">Dodaj galeriju <span style="font-size:18px;margin-right: 2px;" class="pull-right hidden-xs showopacity fa fa-plus"></span></a></li>
                        <li><a href="/gallery/edit">Izmijeni galeriju<span style="font-size:18px;" class="pull-right hidden-xs showopacity fa fa-edit"></span></a></li>
                    </ul>
                </li>
                <li ><a href="#">Logout<span style="font-size:16px;" class="pull-right hidden-xs showopacity fa fa-user"></span></a></li>

            </ul>
        </div>
    </div>
</nav>

Answer 1

您可以通过display: flex; css属性解决此问题。使用新的div类（.new-class包装导航和内容 - 与下面的css示例相同）并调用display:flex.请参阅下面的代码。

<强> CSS

.new-class{
   display:flex;
}

请参阅更新后的jsfiddle。

如果左侧是200px，如何设置宽度为100％的正确内容？

1 个答案: