bootstrap 3控制分区大小、高度和宽度

qybjjes1 于 2021-09-13 发布在 Java

关注(0)|答案(0)|浏览(258)

我有一个包含复选框的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>

看起来像这样：