Bootstrap中的列之间空的垂直空间4 [英] Empty vertical space between columns in Bootstrap 4

问题描述

我有这个html结构：

 < div class =container> 
< div class =row> 
< div class =col-lg-9 description>< / div> 
< div class =col-lg-3 sidebar>< / div> 
< div class =col-lg-9 comments>< / div> 
< / div> 
< / div> 
  

最后的效果是这样的：
。像这样：

https：// www。 codeply.com/go/wnRnLl3Jmo

 < div class =container> 
< div class =row d-lg-block> 
< div class =col-lg-9 float-left description> Desc< / div> 
< div class =col-lg-3 float-right sidebar>侧边栏< / div> 
< div class =col-lg-9 float-left comments>评论< / div> 
< / div> 
< / div> 
  

d-lg-block code> display：block 而不是 display：flex 它允许列浮动在 lg中屏幕宽度。

相关：
在移动版本上使用不同顺序的引导

I have this html structure:

<div class="container">
   <div class="row">
      <div class="col-lg-9 description"></div>
      <div class="col-lg-3 sidebar"></div>
      <div class="col-lg-9 comments"></div>
   </div>
</div>

The final effect is this: I need this HTML structure because when I have a smaller viewports and Bootstrap switches to the 1-column mode, I need that sidebar column goes between description and comments columns (where actually there is the empty space).

The problem is that I want to avoid to have that empty space when the template isn't in "mobile mode".

I tried many ways but I can't achieve this, someone could help me?

EDIT

I tried this way:

<div class="container">
   <div class="row">
      <div class="col-lg-9">
         <div class="description"></div>
         <div class="comments"></div>
      </div>
      <div class="col-lg-3 sidebar"></div>
   </div>
</div>

And tried to reorder by using the css "order", but doesn't worked (the only thing it allows me to do is to put sidebar at the start of the page, but isn't what I want).

解决方案

It's happening because Bootstrap 4 is flexbox, and all of the columns become the same height as the tallest column. Usually, you can workaround this (as you tried) by nesting the columns, but then you won't get the desired column order.

Another workaround is to use floats (like BS3 did) as explained here: Bootstrap 4 - I don't want columns to have the same height. Like this:

https://www.codeply.com/go/wnRnLl3Jmo

<div class="container">
   <div class="row d-lg-block">
      <div class="col-lg-9 float-left description">Desc</div>
      <div class="col-lg-3 float-right sidebar">Sidebar</div>
      <div class="col-lg-9 float-left comments">Comments</div>
   </div>
</div>

The d-lg-block sets display:block on the row instead of display:flex which allows the columns to float in lg screen widths.

Related:
Bootstrap with different order on mobile version

这篇关于Bootstrap中的列之间空的垂直空间4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！