css - 如果左侧为 200px，如何设置宽度为 100% 的右侧内容？

Question

好的，我有这个 fiddle :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 .