Question

我发现this example如何使用alpha 6制作响应式卡片组，但它似乎无法在当前的测试版2中工作。有人知道如何让它在beta 2中工作吗？< / p>

我需要的是响应式卡片组，看起来像这样。

图像可以有不同的大小，我无法控制。我希望图像高度固定为100像素，图像调整大小而不失真。身高应缩放为正文，行应取最大单元格的高度。所以基本上它应该看起来像上面的图像，但有裁剪的图像。

编辑：这是我使用的确切代码：

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>



  </head>

  <body>
      <div class="container">
          <div class="card-deck">
              <div class="card mb-4">
                  <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
                  <div class="card-block">
                      <h4 class="card-title">1 Card title</h4>
                      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                  </div>
              </div>
              <div class="card mb-4">
                  <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
                  <div class="card-block">
                      <h4 class="card-title">2 Card title</h4>
                      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                  </div>
              </div>
              <div class="w-100 hidden-xs-down hidden-md-up"><!-- wrap every 2 on sm--></div>
              <div class="card mb-4">
                  <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
                  <div class="card-block">
                      <h4 class="card-title">3 Card title</h4>
                      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                  </div>
              </div>
              <div class="w-100 hidden-sm-down hidden-lg-up"><!-- wrap every 3 on md--></div>
              <div class="card mb-4">
                  <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
                  <div class="card-block">
                      <h4 class="card-title">4 Card title</h4>
                      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                  </div>
              </div>
              <div class="w-100 hidden-xs-down hidden-md-up"><!-- wrap every 2 on sm--></div>
              <div class="w-100 hidden-md-down hidden-xl-up"><!-- wrap every 4 on lg--></div>
              <div class="card mb-4">
                  <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
                  <div class="card-block">
                      <h4 class="card-title">5 Card title</h4>
                      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                  </div>
              </div>
              <div class="w-100 hidden-lg-down"><!-- wrap every 5 on xl--></div>
              <div class="card mb-4">
                  <img class="card-img-top img-fluid" src="//placehold.it/500x300" alt="Card image cap">
                  <div class="card-block">
                      <h4 class="card-title">6 Card title</h4>
                      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                  </div>
              </div>
              <div class="w-100 hidden-xs-down hidden-md-up"><!-- wrap every 2 on sm--></div>
              <div class="w-100 hidden-sm-down hidden-lg-up"><!-- wrap every 3 on md--></div>
              <div class="card mb-4">
                  <img class="card-img-top img-fluid" src="//placehold.it/500x270" alt="Card image cap">
                  <div class="card-block">
                      <h4 class="card-title">7 Card title</h4>
                      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                  </div>
              </div>
              <div class="card mb-4">
                  <img class="card-img-top img-fluid" src="//placehold.it/500x300" alt="Card image cap">
                  <div class="card-block">
                      <h4 class="card-title">8 Card title</h4>
                      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                  </div>
              </div>
              <div class="w-100 hidden-xs-down hidden-md-up"><!-- wrap every 2 on sm--></div>
              <div class="w-100 hidden-md-down hidden-xl-up"><!-- wrap every 4 on lg--></div>
              <div class="card mb-4">
                  <img class="card-img-top img-fluid" src="//placehold.it/500x270" alt="Card image cap">
                  <div class="card-block">
                      <h4 class="card-title">Card title</h4>
                      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                  </div>
              </div>
              <div class="w-100 hidden-sm-down hidden-lg-up"><!-- wrap every 3 on md--></div>
              <div class="card mb-4">
                  <img class="card-img-top img-fluid" src="//placehold.it/500x270" alt="Card image cap">
                  <div class="card-block">
                      <h4 class="card-title">10 Card title</h4>
                      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                  </div>
              </div>
          </div>

      </div>
  </body>

</html>

在我的Opera浏览器中看起来像这样：

这与我上面描述的例子或内容完全不同。

Answer 1

Bootstrap 4 Beta中不再存在hidden- *和visible- *类。还用卡体取代了卡块。我认为它会解决你的问题。

＆＃13;

POST update

＆＃13;

响应卡片组

1 个答案: