我不是前端开发人员。我对Bootstrap知之甚少。基本上我有一个这样的页面：
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box box-solid">
<div class="box-header">
<i class="fa fa-reorder"></i>
<h3 class="box-title">Orders</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
</div>
<div class="box-body">
<div class="row">
<div class="col-xs-6 col-md-3">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="box box-solid">
<div class="box-header">
<i class="fa fa-street-view"></i>
<h3 class="box-title">Reports</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
</div>
<div class="box-body">
<div class="row">
<div class="col-xs-6 col-md-3">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="box box-solid">
<div class="box-header">
<i class="fa fa-street-view"></i>
<h3 class="box-title">Settings</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
</div>
<div class="box-body">
<div class="row">
<div class="col-xs-6 col-md-3">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="box box-solid">
<div class="box-header">
<i class="fa fa-street-view"></i>
<h3 class="box-title">Status</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
</div>
<div class="box-body">
<div class="row">
<div class="col-xs-6 col-md-3">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="box box-solid">
<div class="box-header">
<i class="fa fa-street-view"></i>
<h3 class="box-title">Add-ons</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
</div>
<div class="box-body">
<div class="row">
<div class="col-xs-6 col-md-3">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="box box-solid">
<div class="box-header">
<i class="fa fa-street-view"></i>
<h3 class="box-title">Qickview</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
</div>
<div class="box-body">
<div class="row">
<div class="col-xs-6 col-md-3">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="box box-solid">
<div class="box-header">
<i class="fa fa-street-view"></i>
<h3 class="box-title">PHP Settings</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i>
</button>
</div>
</div>
<div class="box-body">
<div class="row">
<div class="col-xs-6 col-md-3">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
尽可能只显示一些空盒子。每个方框都有两个按钮：
<button type="button" class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i>
</button>
因此，用户可以通过减号按钮展开和折叠框。或者通过删除按钮从页面中删除它们。
现在我想要的是默认情况下这些框已经折叠了。我的意思是它们不应该作为默认扩展。例如，请看下面这张图片来理解我的意思：
正如您所看到的，用户可以选择要扩展的框，默认情况下不会显示这些框...
所以，如果你知道这个问题的答案，请告诉我......谢谢！
答案 0 :(得分：0)
只需添加CSS类＆＃34;折叠框＆＃34;到主盒div，并替换＆＃34; fa-minus＆＃34;带有＆＃34; fa-plus＆＃34;的课程在按钮文字中。
<div class="box box-solid">
<div class="box-header">
<i class="fa fa-reorder"></i>
<h3 class="box-title">Orders</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-default btn-sm" data-widget="collapse">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="box-body">
....
</div>
您可以使用“元素”标签上的Chrome DevTools打开包含工作框和窗口小部件的页面，并检查窗口小部件如何更改HTML代码。