如何用手风琴滚动

Question

手风琴中有文字框和名字。手风琴完全正常工作，但由于超出文本框而实施滚动，并将其命名为无效。我在这里附加了图像来设计它像图像但滚动，但文本框和标签是错位的。

我尝试设计像这样的图像：

        <!----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