bootstrap 3 内部自适应窗口

Bootstrap 3 中内部自适应窗口的实现可以通过使用栅格系统来实现。栅格系统将页面划分为12列，可以根据需要将内容放置在不同的列中，以达到自适应窗口的效果。

例如，在一个父容器中，我们可以使用以下代码创建两个列，一个占据4列，一个占据8列：

<div class="container">
  <div class="row">
    <div class="col-sm-4">内容1</div>
    <div class="col-sm-8">内容2</div>
  </div>
</div>

这样，随着浏览器窗口的变化，内容1和内容2的宽度会自适应变化，以适应不同大小的屏幕。同时，Bootstrap 3 还提供了一些响应式工具类，可以针对不同的屏幕大小进行自定义样式的设置，以更好地适应不同的设备和屏幕。

相关问题

bootstrap 3 内部高度自适应窗口

Bootstrap 3 中内部高度自适应窗口的实现需要使用一些 CSS 技巧。

一种常见的实现方式是使用绝对定位和 top、bottom 属性，将内容区域的高度设置为父容器的高度减去固定高度的头部和底部。例如：

<div class="container">
  <div class="header">头部内容</div>
  <div class="content" style="position: absolute; top: 50px; bottom: 50px; overflow: auto;">
    内容区域，可以滚动。
  </div>
  <div class="footer">底部内容</div>
</div>

其中，头部和底部的高度为 50px，内容区域使用绝对定位，设置 top 和 bottom 属性为 50px，overflow 属性为 auto，可以自适应高度，并且当内容超出高度时，会自动出现滚动条。

另一种实现方式是使用 Flexbox 布局，将父容器设置为 Flex 容器，设置 flex 属性为 1，使子元素自适应高度。例如：

<div class="container d-flex flex-column">
  <div class="header">头部内容</div>
  <div class="content flex-grow-1 overflow-auto">
    内容区域，可以滚动。
  </div>
  <div class="footer">底部内容</div>
</div>

其中，父容器设置为 Flex 容器，并设置 flex 属性为 1，使子元素自适应高度。内容区域使用 flex-grow-1 属性，表示占据剩余空间。overflow 属性为 auto，可以自动出现滚动条。

bootstrap让图片自适应盒子

可以通过以下步骤让图片自适应盒子：

1. 使用 `img-responsive` 类使图片响应式。

<img src="example.jpg" class="img-responsive" alt="example">

2. 将图片包装在一个具有固定宽度的 `div` 元素中，使其能够自适应。

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="thumbnail">
        <img src="example.jpg" class="img-responsive" alt="example">
      </div>
    </div>
  </div>
</div>

这样，图片将自适应包含它的 `div` 元素的宽度，并在不同设备上自动调整大小。