Twitter bootstrap 响应卡组_Twitter Bootstrap_Bootstrap 4

Twitter bootstrap 响应卡组

twitter-bootstrap bootstrap-4

Twitter bootstrap 响应卡组,twitter-bootstrap,bootstrap-4,Twitter Bootstrap,Bootstrap 4,我发现了如何使用alpha 6制作响应卡组的方法，但在当前的beta 2中它似乎不起作用。有人知道如何让它在beta 2中工作吗我需要的是一个像这样的响应卡组。图像可以有不同的大小，我无法控制。我想将图像高度固定为100像素，并调整图像大小而不失真。正文高度应按正文文本缩放，行应采用最大单元格的高度。因此，基本上它应该看起来像上面的图像，但是带有裁剪的图像编辑：这正是我使用的代码： <!DOCTYPE html> <html lang="en"> <h

我发现了如何使用alpha 6制作响应卡组的方法，但在当前的beta 2中它似乎不起作用。有人知道如何让它在beta 2中工作吗

我需要的是一个像这样的响应卡组。

图像可以有不同的大小，我无法控制。我想将图像高度固定为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>


1卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前
2卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前
3卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前
4卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前
5卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前
6卡片标题
此卡片具有以下支持文本，作为附加内容的自然引入
上次更新是在3分钟前
7卡片标题
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这张卡片的内容甚至比第一张要长，以显示等高动作
上次更新是在3分钟前
8卡片标题
此卡片具有以下支持文本，作为附加内容的自然引入
上次更新是在3分钟前
卡片标题
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这张卡片的内容甚至比第一张要长，以显示等高动作
上次更新是在3分钟前
10卡片标题
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这张卡片的内容甚至比第一张要长，以显示等高动作
上次更新是在3分钟前

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

这与上述示例或我所描述的完全不同。

Bootstrap 4 Beta版中不再存在隐藏类和可见类。还将卡块更换为卡体。我想这会解决你的问题


1卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前
2卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前
3卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长