bootstrap 3 宽高自动为100%
时间: 2024-03-07 09:49:43 浏览: 123
宽屏WEBUI设计师响应式bootstrap模板_宽屏 设计 手机 设计师 响应式 大图 html5 css3 单页 跳转 服务
在 Bootstrap 3 中,可以通过以下方式让元素的宽和高自动扩展为父元素的宽和高:
1. 对于宽度,可以使用 `col-xs-12` 类来实现元素的宽度自动扩展为父元素的宽度,例如:
```html
<div class="container">
<div class="row">
<div class="col-xs-12">
<!-- 这里是内容 -->
</div>
</div>
</div>
```
在这个例子中,`col-xs-12` 类会让元素的宽度自动扩展为父元素 `.row` 的宽度,而 `.row` 的宽度则会自动扩展为 `.container` 的宽度。
2. 对于高度,可以使用以下 CSS 样式来实现元素的高度自动扩展为父元素的高度:
```css
html, body {
height: 100%;
}
.container {
min-height: 100%;
}
```
在这个例子中,`html` 和 `body` 的高度都被设置为 100%,而 `.container` 的 `min-height` 则被设置为 100%,这样就可以让 `.container` 的高度自动扩展为 `html` 和 `body` 元素的高度了。如果只想让某个元素的高度自动扩展为父元素的高度,可以将上面的样式应用到该元素的父元素上。
阅读全文