Question

我想减小这个盒子的尺寸（更纤细）。有人请帮我减小尺寸。下面我添加了盒子
output of the code

<div class="row">
    <div class="col-md-3">
      <div class="box box-default collapsed-box">
        <div class="box-header with-border">
          <h3 class="box-title">Expandable</h3>

          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
            </button>
          </div>
          <!-- /.box-tools -->
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          The body of the box
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
</div>

Answer 1

#example2 {
    width: 300px;
    height: 300px;
    padding: 10px;    
    border: 2px solid red;
}

<div class="row" id="example2">
    <div class="col-md-3">
      <div class="box box-default collapsed-box">
        <div class="box-header with-border">
          <h3 class="box-title">Expandable</h3>

          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
            </button>
          </div>
          <!-- /.box-tools -->
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          The body of the box
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
</div>

将css代码框添加到css文件中，同时将id标签添加到包含框的div中，您可以自定义框的大小。我认为此代码可以帮助您解决问题......我已附上以下链接...请检查...

#example2 {
    width: 300px;
    padding: 10px;    
    border: 2px solid red;
}
<div class="row" id="example2">
    <div class="col-md-3">
      <div class="box box-default collapsed-box">
        <div class="box-header with-border">
          <h3 class="box-title">Expandable</h3>

          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i>
            </button>
          </div>
          <!-- /.box-tools -->
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          The body of the box
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
</div>

如何在bootstrap中减小盒子的大小

1 个答案: