自举响应列高度 [英] Bootstrap Responsive Columns Height
问题描述
我正在使用引导程序4并尝试创建布局.我遇到的问题是响应式的.
当页面尺寸变小时,我希望右侧导航在左侧导航下方.我遇到的问题是主体的运行时间比左侧导航的时间长.右中殿始终位于主体下方,有没有办法将其强迫在左中殿下方而又没有空隙?
<div class="container-fluid">
<div class="row pt-5 pl-3 pr-3">
<div id="left-nav" class="d-none d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2">
...
</div>
<div id="main-body" class="col-12 col-sm-12 col-md-8 col-lg-9 col-xl-8">
...
</div>
<div id="right-nav" class="d-none d-sm-none d-md-block col-md-3 col-lg-3 col-xl-2">
...
</div>
</div>
<section id="footer" class="footer">
<div class="container">
<div class="row">
</div>
</div>
</div>
</div>
由于Bootstrap 4使用flexbox,因此行中的cols始终等于相等高度(由最高的高度设置) ).
您可以通过使用row
上的d-(breakpoint)-block
在某些断点处禁用" Flexbox来解决此问题.通过将行设置为display:block
而不是display:flex
,现在可以使用浮点数将cols左右浮动.
<div class="container-fluid">
<div class="row pt-5 d-md-block d-xl-flex">
<div id="left-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border float-left">
left
</div>
<div id="main-body" class="col-md-8 col-lg-9 col-xl-8 border taller float-right">
main
</div>
<div id="right-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border">
right
</div>
</div>
</div>
演示: https://www.codeply.com/go/A0oYUlPOud >
相关:
如何在引导程序4中修复意外的列顺序?
如何使此列忽略垂直空间
I'm using bootstrap 4 and trying to create a layout. The problem I'm having is with the responsive.
When the page size gets smaller I want the right-nav to go under the left-nav. The problem I run into is when the main body runs longer than the left nav. The right nave always goes under the main body, is there a way to force it under the left-nav without the space in between?
<div class="container-fluid">
<div class="row pt-5 pl-3 pr-3">
<div id="left-nav" class="d-none d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2">
...
</div>
<div id="main-body" class="col-12 col-sm-12 col-md-8 col-lg-9 col-xl-8">
...
</div>
<div id="right-nav" class="d-none d-sm-none d-md-block col-md-3 col-lg-3 col-xl-2">
...
</div>
</div>
<section id="footer" class="footer">
<div class="container">
<div class="row">
</div>
</div>
</div>
</div>
Since Bootstrap 4 uses flexbox, cols across a row are always going to be the equal height (set by the height of the tallest).
You can workaround this by "disabling" flexbox at certain breakpoints using d-(breakpoint)-block
on the row
. By making the row display:block
instead display:flex
, floats can now be used to float cols to the right or left.
<div class="container-fluid">
<div class="row pt-5 d-md-block d-xl-flex">
<div id="left-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border float-left">
left
</div>
<div id="main-body" class="col-md-8 col-lg-9 col-xl-8 border taller float-right">
main
</div>
<div id="right-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border">
right
</div>
</div>
</div>
Demo: https://www.codeply.com/go/A0oYUlPOud
Related:
How to fix unexpected column order in bootstrap 4?
How to make this column ignore the vertical space
这篇关于自举响应列高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!