代码之家  ›  专栏  ›  技术社区  ›  th3g3ntl3man

对齐引导卡内容

  •  1
  • th3g3ntl3man  · 技术社区  · 6 年前

    从图中可以看到,最后一行文本与其他文本(其他引导卡的)没有对齐。从逻辑上讲,这一事实主要取决于上部文本的大小。

    我怎样才能确保无论文本的长度如何,三个基本部分始终保持一致?还考虑到标题(文本的第一行)可以是多行的(非常极端的情况)。

    <div class='col-lg-4' style='cursor: pointer; padding-bottom: 15px;'>
        <div style='height: 377.59px;' class='card mb-3' style='border: 1px solid #33cdc6;'>
            <img style='height:185.59px; width: 100%;' class='card-img-top' src='#' alt='Card image cap'>
            <div class='card-body'>
                <h5 class='card-title' style='color: #293a44;'>TITOLO</h5>
                <p class='card-text'>Breve descrizione</p>
                <p class='card-text'>
                    <span class='h5 text-muted'>Montepremi</span>";
                    <small style='padding-left: 125px;' class='text-muted'>data</small>
                </p>
            </div>
        </div>
    </div>
    

    actual status

    1 回复  |  直到 6 年前
        1
  •  3
  •   James Totty    4 年前

    你要么调整卡片上的CSS Flexbox,让你的元素排成一行。或者你也可以用Bootstrap的 card-footer

    <div class='col-lg-4' style='cursor: pointer; padding-bottom: 15px;'>
    <div style='height: 377.59px;' class='card mb-3' style='border: 1px solid #33cdc6;'>
        <img style='height:185.59px; width: 100%;' class='card-img-top' src='#' alt='Card image cap'>
        <div class='card-body'>
            <h5 class='card-title' style='color: #293a44;'>TITOLO</h5>
            <p class='card-text'>Breve descrizione</p>
            <p class='card-text'>
                <span class='h5 text-muted'>Montepremi</span>";
                <small style='padding-left: 125px;' class='text-muted'>data</small>
            </p>
        </div>
        <div class="card-footer">
            Footer Text here
        </div>
    </div>
    

    我认为这是最简单的方法。

    card-body 作为 display: flex 使用CSS。然后确保 flex-direction 设置为列和 justify-content

    注意:引导4卡组件实际上设置为显示为flex。因此 是弹性项目。你可能会遇到问题。玩一玩吧。

    更多关于 flexbox click here