Bootstrap 响应列高度 [英] Bootstrap Responsive Columns Height

查看：35
本文介绍了Bootstrap 响应列高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用引导程序 4 并尝试创建布局.我遇到的问题是响应式.

当页面尺寸变小时，我希望右侧导航位于左侧导航下方.我遇到的问题是主体运行时间长于左侧导航.右中殿总是在主体下方，有没有办法将其强制在左导航下方而没有中间空间?

<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 id="main-body" class="col-12 col-sm-12 col-md-8 col-lg-9 col-xl-8">...

<div id="right-nav" class="d-none d-sm-none d-md-block col-md-3 col-lg-3 col-xl-2">...

解决方案

由于 Bootstrap 4 使用 flexbox，因此一行中的列总是相等的高度(由最高的高度设置)).

您可以通过使用 row 上的 d-(breakpoint)-block 在某些断点处禁用"flexbox 来解决此问题.通过使行 display:block 代替 display:flex，现在可以使用浮动来将列浮动到右侧或左侧.

<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">剩下
<div id="main-body" class="col-md-8 col-lg-9 col-xl-8 边框高浮动右">主要的
<div id="right-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 边框">对

演示: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

这篇关于Bootstrap 响应列高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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