在AdminLTE

Question

在AdminLTE主题中，当我折叠侧边栏时，它会隐藏右侧容器图标下的菜单标题。请查看以下图片以获得清晰的想法。

Error Image

是否可以将它放在新线上？

这是我的代码：

<aside class="main-sidebar">
<section class="sidebar" style="height:auto">
    <ul class="sidebar-menu tree" style="white-space: normal" data-widget="tree">
        <li class="treeview menu-open" style="white-space: normal">
            <a href="#">
                <i class="fa fa-circle-o"></i>
                <span>Demo Test Demo Test </span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
        <ul class="treeview-menu" style="display: block;">
            <li>
                <a href="#">
                    <div style="width:100%;display:inline-block">
                        <div style="width:10%;float:left;padding-top: 5px;">
                            <i class=" fa fa-arrow-circle-right"></i> 
                        </div>
                        <div style="width:90%;float:right">
                            This is a test
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        </li>
    </ul>
</section>

Answer 1

只需在span标记中添加style="padding-right: 50px;white-space: normal;"即可：

<section class="sidebar" style="height:auto">
    <ul class="sidebar-menu tree" style="white-space: normal" data-widget="tree">
        <li class="treeview menu-open" style="white-space: normal">
            <a href="#">
                <i class="fa fa-circle-o"></i>
                <span style="padding-right: 50px;white-space: normal;">Demo Test Demo Test </span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
        <ul class="treeview-menu" style="display: block;">
            <li>
                <a href="#">
                    <div style="width:100%;display:inline-block">
                        <div style="width:10%;float:left;padding-top: 5px;">
                            <i class=" fa fa-arrow-circle-right"></i> 
                        </div>
                        <div style="width:90%;float:right">
                            This is a test
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        </li>
    </ul>
</section>

我能够完全实现解决方案