时间戳

首页 > 解决方案 > Bootstrap 4 - 如何使卡片占据容器的 100% 宽度

html - Bootstrap 4 - 如何使卡片占据容器的 100% 宽度

问题描述

我需要做类似的事情：

在此处输入图像描述

您看到的内容应该在卡片中，但到目前为止我找不到正确的组合以在引导程序中具有类似的 html 结构。

卡片必须占据所有容器宽度，在里面我需要在左侧显示一个视频，在中间显示一个文本，在右侧显示一个按钮。

有什么建议吗？

到目前为止我这样做了：

<div class="container mt-5">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-4">
                            VIDEO
                        </div>
                        <div class="col-4">
                            TEXT
                        </div>
                        <div class="col-4">
                            BTN
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

我不知道这是否是好的引导策略，因为我对引导相当陌生。但是看到你想要为卡片的每个部分定义宽度，我建议使用引导列。为了使卡片全宽，将宽度设置为 100%。

像下面这样的https://www.codeply.com/p/ab6ZHcUHBs 代码怎么样：

<div class="row">
    <div class="card" style="width: 100%;">
        <div class="row">
            <div class="col-3">
                <video wisth="200" height="150" controls>
                    <source src="https://www.youtube.com/watch?v=fTiz2oNaw0c">
                </video>
            </div>
            
            <div class="col-6">
                <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis quo modi voluptas minima voluptates suscipit doloribus, maiores voluptatem eum placeat?</p>
                </div>
            </div>
            
            <div class="col-3">
                <button>Some button</button>
            </div>
            
        </div>
    </div>
</div>

推荐阅读