bootstrap栅格系统的div高度怎样定

你好，bootstrap栅格系统的div高度是根据其自身内容自适应的，你也可以为div设置高度，类似，div{height:400px;} 这样设置也是可以的，

希望可以帮助到你

超小屏幕（手机）：<768px，列的类前缀 为col-xs-。最大列宽自动适应。 小屏幕（平板）：≥768px，列的类前缀为col- sm-。最大列宽62px。 中等屏幕（桌面显示器）：≥992px，列的类前 缀为col-md-。最大列宽81px。 大屏幕（大桌面显示器）：≥1200px，列的类 前缀为col-lg-。最大列宽97px。

bootstrap 提供了一套非常强大的系统 —— 响应式、移动设备优先的栅格系统。它可以随着设备或者视口的尺寸大小的增加而适当的扩展列数（最多到12列）。

在使用栅格参数时，需要注意：例如当定义了 col-md-1 时，代表宽度大于 992px 时，这一列将会占用 1/12 的宽度，如果没有定义更大的类 col-lg ，那当显示器大于 1200px 时，排列的宽度仍会按照 col-md-1 来分配。但是，如果没有定义更小的类，当前元素将会失去栅格的样式，变成一个普通的div（没有浮动、也没有宽度，默认占满一整行）。

由于 bootstrap 3 的栅格布局是通过浮动来实现的，所以当我们一行中有一块未占满一整行，但又需要进行偏移或者居中的元素，就没法通过 marin: 0 auto 或者 text-align: center ，这时就可以使用 列偏移 来让该列进行偏移。

要进行列偏移，需要在对应的列中添加 col-md-offset-x

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n17" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 09em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><div class="col-md-8 col-md-offset-2">我占了3列</div></pre>

偏移完成后，我们会发现， bootstrap 偏移的原理是通过 margin-left 来实现的，所以 col-md-8 后面的与纳素，也会跟着一起被推开。当偏移量加元素本身的宽度大于12列时，会导致后面的元素进行换行。另外，由于偏移是固定使用 margin-left 属性，所以偏移只能向右偏移。

列排序，就是可以将列的 显示顺序 进行替换。但列排序和列偏移有点不同，就是列偏移是通过 margin-left 来实现的，但是列排序却是通过 相对定位 来实现的。所以列排序它不会影响到周围元素的布局（会导致元素之间的重叠）。

要实现列排序，只需要通过 col-md-pull 或者 col-md-push 来进行左偏移和右偏移。

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n22" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 09em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><div class="row">

<div class="col-md-9 col-md-push-3"><input type="text" placeholder="username"></div>

<div class="col-md-3 col-md-pull-9"><input type="password" placeholder="password"></div>

</div></pre>

以上就是关于bootstrap栅格系统的div高度怎样定全部的内容，包括:bootstrap栅格系统的div高度怎样定、bookstrap栅格系统关于屏幕大小的类前缀、Bootstrap 栅格布局的使用等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！