html - table - tamanho coluna tabela bootstrap




Espaço vertical vazio entre colunas no Bootstrap 4 (2)

Está acontecendo porque o Bootstrap 4 é flexbox e todas as colunas se tornam da mesma altura que a coluna mais alta ...

Em vez disso:

 ------------------  ---------
|                  ||         |
|                  ||         |
 ------------------ |         |
 ------------------ |         |
|                  ||         |
 ------------------  ---------

Você consegue isso:

 ------------------  ---------
|                  ||         |
|                  ||         |
 ------------------ |         |
                    |         |
                    |         |
 ------------------  ---------
|                  |
 ------------------

Normalmente, você pode solucionar isso (como tentou) aninhando as colunas, mas não obterá a ordem desejada das colunas ...

Aninhando:

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

No entanto, para obter a ordem de coluna desejada, as colunas devem estar contidas em um único .row .

Flutuadores:

Assim, a solução alternativa no BS4 é usar floats (como o BS3 fez) como explicado aqui: Bootstrap 4 - Eu não quero colunas para ter a mesma altura . Como isso:

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>

Os conjuntos de d-lg-block são display:block na linha em vez de display:flex que permite que as colunas flutuem em larguras de tela lg .

Relacionado:
Bootstrap com ordem diferente na versão móvel

Eu tenho essa estrutura 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>

O efeito final é este: Eu preciso desta estrutura HTML porque quando eu tenho um viewports menores e Bootstrap muda para o modo de 1 coluna, eu preciso que a coluna da barra lateral vai entre as colunas de descrição e comentários (onde, na verdade, há o espaço vazio).

O problema é que eu quero evitar ter esse espaço vazio quando o modelo não está no "modo móvel".

Eu tentei de muitas maneiras, mas eu não posso conseguir isso, alguém poderia me ajudar?

EDITAR

Eu tentei desse jeito:

<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>

E tentou reordenar usando o css "order", mas não funcionou (a única coisa que me permite fazer é colocar a barra lateral no início da página, mas não é o que eu quero).


.description {
  background-color: red
}

.sidebar {
  background-color: blue
}

.comments {
  background-color: green
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-12 description">description</div>
  </div>
  <div class="row justify-content-end">
    <div class="col-12 col-lg-3 sidebar">sidebar</div>
  </div>
  <div class="row">
    <div class="col-12 col-lg-9 comments">comments</div>
  </div>
</div>
</div>

Eu acho que isso é o que você está indo para





bootstrap-4