[ bootstrap ] 實現卡片里面包含圖片、內容、操作按鈕，形成左中右的布局

描述：

如圖

 

實現：

<div class="card border-0 mb-3 mt-3">
    <!-- 列表頭部 -->
    <div class="card-header">
            ...
    </div>
    <div class="card-body border d-flex justify-content-start">
        <img src="../../assets/logo.png" alt="" class="mr-2" style="width:50px; height:50px;">
        <div class="align-self-center">
            <div>
                <span class="h6">name</span>
                <span class="small">關注0</span>
                <span class="small">粉絲0</span>
            </div>
            <p class="mb-0">內容哈哈哈</p>
        </div>
        <div class=" align-self-center  ml-auto">
            <button class="btn btn-primary">Delete</button>
        </div>

    </div>
</div>

 

注意點/QA：

1.圖片需要指定width和height，不然會被拉伸

 style="width:50px; height:50px;"

2.card-body是用flex布局，元素會從頭向后排列，因此按鈕會緊挨在內容后面，如下圖所示。想要Delete按鈕單獨靠右，如何解決？

[ 解決方案 ] ：添加 ml-auto 類。

 

3.還是card-body的Delete按鈕，在flex布局下會吸着頂部，想要把它垂直居中，怎么做呢？

[ 解決方案 ] ：添加 align-self-center 類。詳見bootstrap4 - 工具類 - Flex布局 - Align self 。