提问者:小点点

不使用flex将div对齐在一行中,因为这会影响高度(Bootstrap)[重复]


我用的是botostrap CSS。 我想在一行中对齐3个div,所以我在引导CSS中使用了类“row”。 我知道那一行有display:flex,它使高度自动保持不变。

我想要的高度不是一样的。 没有Flex的情况下,还有其他方法来调整DIV吗?

null

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="row justify-content-center">

  <div class="bg-primary col-md-2 ml-3 mr-3 text-center" >
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
   </div>
 
   <div class="bg-danger col-md-2 ml-3 mr-3 text-center" >
    <p>HHAHAHAHA</p>

   </div>
   
   <div class="bg-warning col-md-2 ml-3 mr-3 text-center" >
    <p>HHAHAHAHA</p>

   </div>

</div>

null


共1个答案

匿名用户

您可以使用align-items-start类(请参阅https://getbootstrap.com/docs/4.5/utilities/flex/#align-items

null

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="row justify-content-center align-items-start">

  <div class="bg-primary col-md-2 ml-3 mr-3 text-center" >
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
   </div>
 
   <div class="bg-danger col-md-2 ml-3 mr-3 text-center" >
    <p>HHAHAHAHA</p>

   </div>
   
   <div class="bg-warning col-md-2 ml-3 mr-3 text-center" >
    <p>HHAHAHAHA</p>

   </div>

</div>