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

编程问答 2022-08-15

问题描述

我需要做类似的事情：

enter image description here

您看到的内容本来应该放在卡片中，但到目前为止，我找不到在引导程序中具有类似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>

解决方法

我不知道这是否是很好的自举练习，因为我对自举还很陌生。但是，如果要为卡的每个部分定义宽度，我建议使用引导程序列。并要使卡全宽，请将宽度设置为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>
,

我正尝试使它与Bootstrap 4中的设置相同。对于图像的宽度和高度，必须编写针对不同视口的媒体查询。请看一下，让我知道。如果它与您想要的相同，或者我必须编辑或执行您想要的其他事情。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body> 

<div class="container-fluid">
    <div class="card" style="width: 100%;">
        <div class="row">
            <div class="col-3 col-md-3">
                <video width="200" height="150" controls>
                    <source src="https://www.youtube.com/watch?v=fTiz2oNaw0c">
                </video>
            </div>
            
            <div class="col-6 col-md-6">
                <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </div>
            
            <div class="col-3 col-md-3">
                <button>Button</button>
            </div>
            
        </div>
    </div>
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container-fluid">
  <div class="card mt-3">
    <div class="row p-3">
      <div class="col-3 col-lg-3 col-sm-4">
        <img src="" width="250" height="150" class="border border-2 border-dark">
      </div>
      <div class="col-6 col-lg-6 col-sm-4">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>
      </div>
      <div class="col-3 col-lg-3 col-sm-4">
        <button class="btn btn-primary">Confirm</button>
      </div>
     </div>
  </div>
</div>

</body>
</html>

bootstrap-4htmltwitter-bootstrap