html - 如何在 Accordion 中放置卷轴

Question

Accordion 中有文本框和名称。 Accordion 工作正常，但在实现滚动时由于超出文本框并命名其不工作。我在这里附上了图片，将其设计为图片但滚动，但文本框和标签放错了位置。

我试着设计成这样的图片:

        <!----Starts second column-------->
                    <div class="col-sm-12 col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading" style="background-color: #b3daff;">
                                <h4 class="panel-title">
                                    <a href="#"><span class="glyphicon glyphicon-remove"
                                        style="color: red"></span></a> <a data-toggle="collapse"
                                        data-parent="#accordion" href="#collapseTwo"><span
                                        style="font-weight: 700;">Educational Details</span><span
                                        class="glyphicon glyphicon-plus" style="color: red">&nbsp;</span></a>

                                </h4>

                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <div class="col-sm-4 col-md-12" id="ex1">
                                        <div class="row" id="text">
                                            <div class="form-group">
                                                <div class="col-sm-4 col-md-12">
                                                    <div class="row">
                                                        <div class="form-group">
                                                            <label class="control-label col-sm-12 col-md-12">Degree
                                                                Stream 
                                                        </div>
                                                    </div>
                                                </div>
                                                <br />

                                                <!-- Address line 1 -->
                                                <div class="col-md-12">

                                                    <div class="row">
                                                        <div class="form-group">
                                                            <label class="control-label col-md-3">10th</label>
                                                            <div class="col-md-3">
                                                                <input type="text" class="form-control" id="emp"
                                                                    required placeholder="Address Line 1" />
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" class="form-control" id="emp"
                                                                    required placeholder="Address Line 1" />
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" class="form-control" id="emp"
                                                                    required placeholder="Address Line 1" />
                                                            </div>
                                                        </div>
                                                    </div>

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

                                                <!-- Address line 1 -->
                                                <div class="col-md-12">

                                                    <div class="row">
                                                        <div class="form-group">
                                                            <label class="control-label col-md-3">12th</label>
                                                            <div class="col-md-3">
                                                                <input type="text" class="form-control" id="emp"
                                                                    required placeholder="Address Line 1" />
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" class="form-control" id="emp"
                                                                    required placeholder="Address Line 1" />
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" class="form-control" id="emp"
                                                                    required placeholder="Address Line 1" />
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>


                                                <br /> <br />

                                                <!-- Address line 1 -->
                                                <div class="col-md-12">

                                                    <div class="row">
                                                        <div class="form-group">
                                                            <label class="control-label col-md-3">Degree</label>
                                                            <div class="col-md-3">
                                                                <input type="text" class="form-control" id="emp"
                                                                    required placeholder="Address Line 1" />
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" class="form-control" id="emp"
                                                                    required placeholder="Address Line 1" />
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" class="form-control" id="emp"
                                                                    required placeholder="Address Line 1" />
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>

                                                <br /> <br />

                                                <!-- Address line 1 -->
                                                <div class="col-md-12">

                                                    <div class="row">
                                                        <div class="form-group">
                                                            <label class="control-label col-md-3">Masters</label>
                                                            <div class="col-md-3">
                                                                <input type="text" class="form-control" id="emp"
                                                                    required placeholder="Address Line 1" />
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" class="form-control" id="emp"
                                                                    required placeholder="Address Line 1" />
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" class="form-control" id="emp"
                                                                    required placeholder="Address Line 1" />
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>


                                                <br /> <br />

                                                <!-- Address line 1 -->
                                                <div class="col-md-12">

                                                    <div class="row">
                                                        <div class="form-group">
                                                            <label class="control-label col-md-3">Certificate</label>
                                                            <div class="col-md-3">
                                                                <input type="text" class="form-control" id="emp"
                                                                    required placeholder="Address Line 1" />
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" class="form-control" id="emp"
                                                                    required placeholder="Address Line 1" />
                                                            </div>
                                                            <div class="col-md-3">
                                                                <input type="text" class="form-control" id="emp"
                                                                    required placeholder="Address Line 1" />
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!----Ends second column-------->
                    </div>
                    <!----Ends accordion column-------->

Answer 1

要使其可滚动，请将 overflow-x:scroll 添加到 panel-body 类。

#collapseTwo .panel-body {
  overflow-x:scroll;
}

要让它滚动，请将该面板内的 #ex1 div 的宽度设置为大于 100% 以将尺寸插入溢出区域。

#ex1 {
  width:150%;
}

给定类名我假设 Bootstrap : https://codepen.io/anon/pen/XYJMrp