Bootstrap 4 - I don't want columns to have the same height

和自甴很熟 提交于 2019-12-17 09:58:21

问题


In this bootstrap 4 example the 2 columns have the same height. I do not want this. Is there a quick fix for this ?

    <div class="col-lg-3 card bg-faded">
      <h1><small>Some favorites</small></h1>
      <ul>
        <li>Celery root</li>
        <li>Spaghetti Squash</li>
        <li>Killer Mushrooms</li>
      </ul>
    </div>

    <div class="col-lg-9">
      <h1>Wild & Wicky Vegetables</h1>
      <p>Kale c.....t.</p>
    </div>
</div><!--row-->

回答1:


Yes, you can use d-block on the row, and float-left on the columns to make it work the Bootstrap 3.x way with floated columns instead of flexbox..

<div class="row d-block">
    <div class="col-lg-3 float-left">
        ..
    </div>
    <div class="col-lg-9 float-left">
        ..
    </div>
</div>

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


Related:
Bootstrap 4 Columns float style like Bootstrap 3 is it possible?
Empty vertical space between columns in Bootstrap 4



来源:https://stackoverflow.com/questions/44710785/bootstrap-4-i-dont-want-columns-to-have-the-same-height

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!