Question

我正在尝试使用Bootstrap

创建以下组件

我尝试了什么：

<style>
 .card-container {
  height:150px;
  overflow-y: scroll;
}
</style>

<div class="jumbletron">
        <div class="card card-inverse">
          <div class="card-block">
            <h3 class="card-title text">Alerts Card</h3>

            <div class="card-container">

              <div class="card card-inverse">
                <div class="card-block">
                  <h3 class="card-title text">Alert 1</h3>

                </div>
              </div>

            </div>
            <div class="card card-inverse">
              <div class="card-block">
                <h3 class="card-title text">Alert 2</h3>

              </div>
            </div>
          </div>

        </div>
      </div>

http://jsfiddle.net/rp51o4se/1/

但遗憾的是无法弄清楚如何正确地做到这一点。我怎么能做到这一点？

Answer 1

在您的示例中，您使用jumbletron代替jumbotron作为课程，并将其中一张卡放在容器外。

此处更新了示例 - http://jsfiddle.net/rp51o4se/5/

我还在卡片容器中添加了一个1rem的填充物，使其更接近您附加的图像。

Answer 2

你的div有点混乱而且没有正确包装。

＆＃13;

.card-container {
    height:150px;
    overflow-y: scroll;
}

＆＃13;

<div class="jumbotron">
    <h1>My alert center</h1>

    <div class="card-container">
        <div class="card card-inverse">
            <div class="card-body">
                <h3 class="card-title text">Alerts Card</h3>
            </div>
        </div>

        <div class="card card-inverse">
            <div class="card-body">
                <h3 class="card-title text">Alert 1</h3>
            </div>
        </div>

        <div class="card card-inverse">
            <div class="card-body">
                <h3 class="card-title text">Alert 2</h3>
            </div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

＆＃13;

Answer 3

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<style>
  .jumbotron{
    height: 200px;
    overflow-y: scroll;
  } 
  .mb-10{
    margin-bottom: 20px;
  } 
</style>
<body>

<div class="jumbotron">
  <div class="card-container">
<div class="card w-50 mb-10">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
</div>
<div class="card w-50 mb-10">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
</div>
<div class="card w-50 mb-10">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
</div>
</div></div>
</body>
</html>

试试这个

如何创建以下Bootstrap组件？

3 个答案: