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

引导4-如何使卡采取100%宽度的容器

bootstrap-4 twitter-bootstrap css html

0

naspy971 · 技术社区 · 5 年前

我需要做一些类似的事情:

这张卡要占容器的所有宽度,在里面我需要在左边显示一个视频,在中间显示一个文本,在右边显示一个按钮。

有什么建议吗?

到目前为止,我都这么做了:

<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>

0 回复 | 直到 5 年前

1

koder613 5 年前

这样的怎么样 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>

2

1

bharti parmar 5 年前

<!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>