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"> </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-------->
最佳答案
要使其可滚动，请将 overflow-x:scroll 添加到 panel-body 类。
#collapseTwo .panel-body {
overflow-x:scroll;
}
要让它滚动，请将该面板内的 #ex1 div 的宽度设置为大于 100% 以将尺寸插入溢出区域。
#ex1 {
width:150%;
}
给定类名我假设 Bootstrap : https://codepen.io/anon/pen/XYJMrp
关于html - 如何在 Accordion 中放置卷轴，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50606027/