使Bootstrap 4中的flex类占据整个表格单元父级的高度

Question

I am using Bootstrap 4 CSS and JS (from the official CDN), along with Font Awesome 5 (also official CDN).

I was originally using the text-center class from Bootstrap, since FA5 icons are just text. Then I tried using text-justify to make the icons dispersed better on larger-width displays, but this didn't work at all.

Here is the table cell part of the markup. I didn't want to paste the whole thing here because the templating (Jinja2) is fairly long.

<td>
  <div class="container-fluid d-flex justify-content-between">
    <i class="fas fa-fw fa-chevron-up"></i>
    <i class="fas fa-fw fa-chevron-down"></i>
    <i class="fas fa-fw fa-star"></i>
  </div>
</td>

Table cell displays as expected except it is not full height and the icons look off-center.

Does anyone have a fairly simple way to make the d-flex element use the full height of the parent cell? Or just a better way in general to make up-vote, down-vote, and favorite icons fit well within a table cell? I also need to figure out a way to make the current scores / favorites number align well with all of the other cells in the table. Any existing solutions or advice you have would be very helpful as well.

Edit: As an afterthought, I should add that these icons will eventually be inside of buttons if that makes a difference.

Thanks.

Answer 1

Use align-items-center bootstrap class to align your elements center of the cell. If you used any custom line-height, Kindly remove it.

<td>
      <div class="container-fluid d-flex justify-content-between align-items-center">
        <i class="fas fa-fw fa-chevron-up"></i>
        <i class="fas fa-fw fa-chevron-down"></i>
        <i class="fas fa-fw fa-star"></i>
      </div>
    </td>

Note: The question was not clear to me. I gave the solution to align your fa icons vertically center to the cells. Hope u asking the same...

Answer 2

You say the icons will eventually be inside of buttons. Why not use a button group? Or use bootstraps col classes to align things. Set the height of the button 100% to take up the full height of the cell. Both ideas shown below.

I hope this helps

 td{ height: 100px; } .btn, .btn-group{ height: 100%; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> <table> <tbody> <tr> <td> <div> <span class="col-sm-4"> <i class="fas fa-fw fa-chevron-up"></i> </span> <span class="col-sm-4"> <i class="fas fa-fw fa-chevron-down"></i> </span> <span class="col-sm-4"> <i class="fas fa-fw fa-star"></i> </span> </div> </td> </tr> <tr> <td> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-light"> <i class="fas fa-fw fa-chevron-up"></i> </button> <button type="button" class="btn btn-light"> <i class="fas fa-fw fa-chevron-down"></i> </button> <button type="button" class="btn btn-light"> <i class="fas fa-fw fa-star"></i> </button> </div> </td> </tr> </tbody> </table> <script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 

Answer 3

Why using .container-fluid with .d-flex ? Use another parent tag for container-fluid class.