Question

我有一个单独的列显示图像，当我点击其中一个按钮时，它将在第一个列旁边弹出一个新列。我设法创建了一个可折叠的列，问题是它们没有正确排列。我认为这个问题是由于cols在div中引起的，但我不知道如何解决它。

<body>

    <div class="container-fluid">

        <div class="row">
            <div class="col">
                <h1>Snapgram</h1>
            </div>
        </div>

        <!--canvas -->
        <div class="row">
            <div class="col">
                <canvas id="editorCanvas" width="600" height="400"/>
            </div>          

            <!--control de brillo -->
            <div id="opciones" data-children=".item">
                <div class="item">
                    <div class="col collapse" id="brilloColapsable" role="tabpanel">
                        <h2>brillo</h2>
                    </div>
                </div>

            <!--ventana de filtros -->
                <div class="item">
                    <div class="col collapse" id="filtrosColapsable" role="tabpanel">
                            <h2>filtros</h2>
                    </div>
                </div>

            <!--control del contraste -->
                <div class="item">
                    <div class="col collapse" id="contrasteColapsable" role="tabpanel">
                            <h2>contraste</h2>
                    </div>
                </div>
            </div>
        </div>

        <!--opciones -->
        <div  class="row opc">
            <div class="col text-center">
                <div class="btn-group" role="group" aria-label="Opciones de edicion">

                    <button type="button" class="btn btn-dark" data-toggle="collapse"  data-parent="#opciones" data-target="#brilloColapsable" aria-expanded="true" aria-controls="brilloColapsable"><span class="oi oi-sun" title="brillo" aria-hidden="true"></span></button>

                    <button type="button" class="btn btn-dark" data-toggle="collapse"  data-parent="#opciones" data-target="#filtrosColapsable" aria-expanded="true" aria-controls="filtrosColapsable"><span class="oi oi-aperture" title="filtros" aria-hidden="true"></span></button>

                    <button type="button" class="btn btn-dark" data-toggle="collapse"  data-parent="#opciones" data-target="#contrasteColapsable" aria-expanded="true" aria-controls="contrasteColapsable"><span class="oi oi-contrast" title="contraste" aria-hidden="true"></span></button>

                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  <script type="text/javascript" src="js/editor.js"></script>
</body>

bootstrap 4，折叠列

0 个答案: