Question

我有一个导航菜单，带有可折叠的子页面列表。除了下拉元素之外，还需要在同一行上有一个可访问的页面。这是我到目前为止所做的。

<div class="container-fluid">
                <div class="row">
                    <div class="col-sm-3 col-lg-2">
                        <div class="navbar navbar-default navbar-fixed-side">
                            <ul class="nav" id="side-menu-0">
                                <li id="menu-template" class="nav">
                                    <a href="index.html"><i class="fa fa-dashboard fa-fw"></i>Dashboard</a>
                                </li>
                                <li id="menu-template-top" class="nav" role="menu">
                                    <a href="#" style="display:inline-block;" class="nav">Google</a>
                                    <a href="#menu-template-top-sub" data-toggle="collapse" class="nav navbar-nav pull-right" style="display:inline-block;"><span class="caret"></span></a>
                                            <ul id="menu-template-top-sub" class="collapse nav nav-second-level">
                                                <li class="nav">
                                                    <a href="flot.html">Flot Charts</a>
                                                </li>
                                                <li class="nav">
                                                    <a href="morris.html">Morris.js Charts</a>
                                                </li>
                                            </ul>
                                    <!-- /.nav-second-level -->
                                </li>
                            </ul>
                        </div>
                    </div>

这是工作小提琴，所以你可以看到我想要做的事情。我希望链接适用于＆＃34; Google＆＃34;伸展到右边，就像＆＃34; Dashboard＆＃34;链接可以做。 Working Fiddle

Answer 1

一个简单的解决方法是：

<a href="#" style="display:inline-block; width:calc(100% - 40px);" class="nav">Google</a>

如果您愿意，您当然可以将其外部化为样式表。

40px中的calc(100% - 40px)是您的下拉符号的宽度。

这使它一直延伸到下拉展开按钮。

Answer 2

将显示块添加到Post.includes(comments: :user).find(params[:post_id])标记，而不是显示内嵌块。块元素将跨越整个宽度。

填充父级的剩余宽度

2 个答案: