Question

对不起，这是一个很愚蠢的问题，但这也许是因为工作了几个小时，但我无法解决这个问题。我的意思是，我认为我可以通过使用javascript处理整个div结构来解决此问题，但是我不禁感到必须有一种我没有想到的更简单的解决方案。

这是我现在得到的东西的小提琴：

<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
    <div class="container-fluid colindex">
        <div class="row">
            <div class="col-md-9 stackem">
                <div class="card">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('layouts.index') }}">Index</a></li>
                        <li class="breadcrumb-item active"></li>
                    </ol>
                    <h4 class="card-header">Test
                        <button class="btn btn-primary add" type="button" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" title="test"><i class="material-icons" id="sidebaricons">bookmark</i></button>
                    </h4>
                    <div class="card-body">
                        <div class="container index">
                            <div class="row py-3 px-4">
                                <div class="col-md-6">
                                    <p></p>
                                </div>
                                <div class="col-md-6">
                                    <p></p>
                                </div>
                            </div>
                            <div class="row py-3 px-4">
                                <div class="col-md-6">
                                    <p>test</p>
                                </div>
                                <div class="col-md-6">
                                    <p>test</p>
                                </div>
                            </div>
                            <div class="row py-3 px-4">
                                <div class="col-md-6">
                                    <p>test</p>
                                </div>
                                <div class="col-md-6">
                                    <p>test</p>
                                </div>
                            </div>
                        </div>      
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <p>testlist</p>
            </div>
        </div>
    </div>
</main>

因此，在右侧显示“ testlist”的div处，我在其中包含了一个包含带有快速访问链接的列表的列表。

问题：我要解决的问题是在此列表上添加一个按钮，以对其进行切换。问题是，当它隐藏时，我希望左侧的其他div扩大并占用列表中的空间。当列表再次被切换时，它会变得像现在一样。

再次，很抱歉（我确定）这个愚蠢的问题，并在此先感谢一吨。

Answer 1

您是否尝试过使用<div class="col-md stackem"> 代替<div class="col-md-9 stackem"> 让引导程序自动调整宽度？

切换div并展开/压缩其他

1 个答案: