html 在一行中对齐Div而不使用flex，因为这会弄乱高度(Bootstrap)[duplicate]

dpiehjr4 于 2022-12-09 发布在 Bootstrap

关注(0)|答案(1)|浏览(139)

此问题在此处已有答案：

Remove equal height in Bootstrap 4 row columns（2个答案）
两年前就关门了。
我正在使用Bootstrap，并希望在一行中对齐3个div，所以我使用了Bootstrap中的类“row”。我知道该行具有display：flex，它使高度自动相同。
我希望高度不是一样的。有没有其他方法可以在没有Flex的情况下对齐div？

<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>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
   </div>
 
   <div class="bg-danger col-md-2 ml-3 mr-3 text-center" >
    <p>This is a paragraph.</p>

   </div>
   
   <div class="bg-warning col-md-2 ml-3 mr-3 text-center" >
    <p>This is a paragraph.</p>

   </div>

</div>

Html

来源：https://stackoverflow.com/questions/62360660/aligning-divs-in-one-row-without-flex-because-it-messes-the-height-bootstrap

1条答案

按热度按时间

dphi5xsq1#

您可能是align-items-start类，请参见https://getbootstrap.com/docs/4.5/utilities/flex/#align-items

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

赞(0）回复(0）举报 2022-12-09

我来回答

html 在一行中对齐Div而不使用flex，因为这会弄乱高度(Bootstrap)[duplicate]

1条答案

相关问题

热门标签

最新问答