首页 > 解决方案 > Bootstrap 3 控制 div 大小调整高度和宽度

问题描述

我有一个包含一个复选框的 div,我希望它的高度比现在高一倍或更多,因此将显示更多复选框选项

.containerSelectBox {
  border: 2px solid #ccc;
  width: 300px;
  height: 80px;
  overflow-y: scroll;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="form-group">
  <label class="col-md-2 col-sm-2 col-xs-8 control-label"> Data Sources </label>
  <div class="col-md-6 col-sm-6 col-xs-12">
    <div class="form-control ">
      <input type="checkbox" /> This is checkbox <br />
      <input type="checkbox" /> This is checkbox <br />
      <input type="checkbox" /> This is checkbox <br />
      <input type="checkbox" /> This is checkbox <br />
      <input type="checkbox" /> This is checkbox <br />
      <input type="checkbox" /> This is checkbox <br />
      <input type="checkbox" /> This is checkbox <br />
      <input type="checkbox" /> This is checkbox <br />
      <input type="checkbox" /> This is checkbox <br />
      <input type="checkbox" /> This is checkbox <br />
    </div>
  </div>
</div>

看起来像这样:

在此处输入图像描述

标签: javascripthtmlcsstwitter-bootstrap-3resize

解决方案


推荐阅读