防止内容扩展到Div之外(并使其滚动) [英] Prevent Content From Extending Outside of Div (and make it scroll)

查看：66
本文介绍了防止内容扩展到Div之外(并使其滚动)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一些基本的标记(使用Bootstrap 4):

 < div class =卡片阴影m-3"；style =" width:500px;高度:280像素"< div class =卡体">< div class ="row">< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg"class ="img-thumbnail"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg"class ="img-thumbnail"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg"class ="img-thumbnail"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg"class ="img-thumbnail"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg"class ="img-thumbnail"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg"class ="img-thumbnail"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg"class ="img-thumbnail"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg"class ="img-thumbnail"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg"class ="img-thumbnail"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg"class ="img-thumbnail"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg"class ="img-thumbnail"></div></div>< button type =按钮"class ="btn btn-primary w-100 btn-lg mb-3"插入/按钮".</div></div> 

  .overflow-auto

预览示例 

 <！-CSS->< link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"完整性="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfQP2P2X匿名">< ;!-带Popper.js的jQuery和JS包->< script src ="https://code.jquery.com/jquery-3.5.1.slim.min.js"完整性="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C + OGpamoFVy38MVBnE + IbbVYUew + OrCXaRkfj" crossorigin ="anonymous"></script>< script src ="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"完整性="sha384-ho + j7jyWK8fNQe + A12Hb8AhRq26LrZ/JpcUGGOn + Y7RsweNrtN/tE3MoK7ZeZDyx"crossorigin =" anonymous</script>< div class ="card shadow m-3" style ="width:500px; height:280px">< div class ="card-body溢出自动">< div class ="row">< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div></div></div>< div class ="card-footer">< button type ="button" class ="btn btn-primary w-100 btn-lg">插入</button></div></div>

第二个问题:

如果这就是您的意思，是的，有一种方法:为此，我们使用(flex)结构.

 <！-CSS->< link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"完整性="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfQP2P2X匿名">< ;!-带Popper.js的jQuery和JS包->< script src ="https://code.jquery.com/jquery-3.5.1.slim.min.js"完整性="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C + OGpamoFVy38MVBnE + IbbVYUew + OrCXaRkfj" crossorigin ="anonymous"></script>< script src ="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"完整性="sha384-ho + j7jyWK8fNQe + A12Hb8AhRq26LrZ/JpcUGGOn + Y7RsweNrtN/tE3MoK7ZeZDyx"crossorigin =" anonymous</script>< div class ="card shadow m-3" style ="width:500px; height:280px">< div class ="card-body h-100 d-flex flex-column">< div class ="row overflow-auto">< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div></div>< button type ="button" class ="btn btn-primary w-100 btn-lg">插入</button></div></div>

或者第二种情况是按钮也在滚动条内:

 <！-CSS->< link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"完整性="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfQP2P2X匿名">< ;!-带Popper.js的jQuery和JS包->< script src ="https://code.jquery.com/jquery-3.5.1.slim.min.js"完整性="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C + OGpamoFVy38MVBnE + IbbVYUew + OrCXaRkfj" crossorigin ="anonymous"></script>< script src ="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"完整性="sha384-ho + j7jyWK8fNQe + A12Hb8AhRq26LrZ/JpcUGGOn + Y7RsweNrtN/tE3MoK7ZeZDyx"crossorigin =" anonymous</script>< div class ="card shadow m-3" style ="width:500px; height:280px">< div class ="card-body h-100溢出自动">< div class ="row">< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div>< div class ="col-3 mb-2">< img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class ="img-缩略图"></div></div>< button type ="button" class ="btn btn-primary w-100 btn-lg">插入</button></div></div>

I have some basic markup (using Bootstrap 4):

<div class="card shadow m-3" style="width:500px; height: 280px">
  <div class="card-body">
        <div class="row">
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
          <div class="col-3 mb-2">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
          </div>
        </div>
        <button type="button" class="btn btn-primary w-100 btn-lg mb-3">Insert</button>
      </div>
</div>

Codepen

What I want is well, first of all for the content to not extend beyond the card :) After that, I'd like the div containing the images (div.row) to take up the remaining space after the space for the button has been allocated, and for any overflowing content to scroll vertically in that div (i.e., I need the button to stay fixed at the bottom of the card while the content in the div above is scrolled).

Solution with Bootstrap classes preferred, but custom CSS also fine. I don't want to have to manually specify the height of the div.row, would like it to automatically fill remaining space in the div.card-body (some flexbox magic?).

Thank you for your help!

PS

I have been able to constrain the content to the card by using overflow-auto, but only if I use it on the entire card body, in which case the button will scroll with the image content (not what I want).

Codepen

解决方案

You can implement a scenario like this.

.overflow-auto

Preview the example

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<div class="card shadow m-3" style="width:500px; height: 280px">
  <div class="card-body overflow-auto">
    <div class="row">
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
    </div>
  </div>
  <div class="card-footer">
    <button type="button" class="btn btn-primary w-100 btn-lg">Insert</button>
  </div>
</div>

For your second question:

If that's what you mean, yes there is a way: For this, we use the (flex) structure.

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<div class="card shadow m-3" style="width:500px; height: 280px">
  <div class="card-body h-100 d-flex flex-column">
    <div class="row overflow-auto">
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
    </div>
    <button type="button" class="btn btn-primary w-100 btn-lg">Insert</button>
  </div>
</div>

Or a second scenario where the button is also inside the scroll:

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<div class="card shadow m-3" style="width:500px; height: 280px">
  <div class="card-body h-100 overflow-auto">
    <div class="row">
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
      <div class="col-3 mb-2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
      </div>
    </div>
    <button type="button" class="btn btn-primary w-100 btn-lg">Insert</button>
  </div>
</div>

这篇关于防止内容扩展到Div之外(并使其滚动)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆