当前位置: 首页 > 面试题库 >

具有视口列数的Bootstrap 4卡座

左丘积厚
2023-03-14
问题内容

我正在尝试在引导程序4中实现卡片组功能,以使我所有的卡片都具有相同的高度。

引导程序提供的示例显示了4张漂亮的卡片,但是无论视口如何,它都是4张卡片。

这对我来说没有意义,因为我认为您希望缩小卡的最小尺寸,以使内容看起来仍然不错。

然后,我尝试添加一些视口类以打破屏幕尺寸,但是一旦添加了该div,卡片组将不再适用,因此不会使卡片的高度相等。

我怎样才能做到这一点?这是缺少的功能,将在完整版的Bootstrap 4中解决吗?

<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
          <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>There are also some interesting new text classes for uppercase and capitalize.</p>
          <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
          <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
        </blockquote>
      </div>
    </div>
        <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
          <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>There are also some interesting new text classes for uppercase and capitalize.</p>
          <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
          <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
        </blockquote>
      </div>
    </div>
  </div>
</div>

问题答案:

更新于2018

如果您想要一个响应式卡片组,请使用可见性实用程序来强制将每X列换行到不同的视口宽度(断点)…

[Bootstrap 4响应 式卡座](v 4.1

Bootstrap 4 alpha 2的原始答案:

您可以 使用网格col-*-*来获取不同的宽度(而不是卡片甲板),然后使用flexbox将等高设置为cols。

.row > div[class*='col-'] {
  display: flex;
  flex:1 0 auto;
}

问题在于,没有Flexbox的情况下,很难控制宽度的card-deck用途table-cell。从Bootstrap 4 Alpha
6开始,flexbox是默认的,因此flexbox不需要其他CSS,并且 h-100
该类可用于使卡全高



 类似资料:
  • 主要内容:简单的卡片,实例,头部和底部,实例,多种颜色卡片,实例,标题、文本和链接,实例,图片卡片,实例,实例简单的卡片 我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片,实例如下: 实例 <div class="card"> <div class="card-body">简单的卡片</div> </div> Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。 头部和底部 .card-header类用于创

  • 主要内容:边框,实例,边框颜色,实例,边框圆角设置,实例,浮动,实例,响应式浮动,实例,居中对齐,实例,宽度,实例,高度,实例,间距,实例Bootstrap4 提供了一些小工具,可以让我们不用写 CSS 代码就能实现想要的效果。 边框 使用 border 类可以添加或移除边框: 实例 <span class="border"></span> <span class="border border-0"></span> <span class="border border-top-0"></span

  • 我在尝试创建一个带有计算平均列的视图时遇到了一些麻烦,对于每个电影行,我都需要一个基于分级表中该电影的所有分级的平均分级。 电影表: 评级表: 以下是我目前掌握的情况: 它告诉我派生表需要自己的别名,我不知道这是否真的给出了每行的平均值。

  • 主要内容:实例,激活状态的列表项,实例,禁用的列表项,实例,链接列表项,实例,移除列表边框,实例,水平列表组,实例,多种颜色列表项,实例,实例大部分基础列表组都是无序的。 要创建列表组,可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类: 实例 <ul class="list-group"> <li class="list-group-item">First item</li> <li class="list-group-i

  • 问题内容: 我有一个产生以下结果集的视图: 我需要将其转换为: 我只使用交叉表使用列,就知道该怎么做。如何在目标结果集中使用和产生新列?如果我只是在查询中添加列,它会抱怨“无效的源数据SQL语句”。 我正在使用PostgreSQL 9.3.6。 问题答案: 一种方法是使用复合类型: 或者,为临时使用(在会话期间注册类型): 然后,根据需要运行交叉表并分解复合类型: 所有括号都是 必需的 ! 基础知

  • 问题内容: 我正在尝试动态地旋转表,但无法获得所需的结果。这是创建表的代码 到目前为止编写的代码....这将列套和jib_in旋转为行,但这仅是两个ROWS,即我在PIVOT函数下放入聚合函数中的一个,以及我在QUOTENAME()中放入的行 我需要所有列进行旋转并显示在旋转表上。任何帮助,将不胜感激。我是动态枢纽领域的新手。我尝试了很多添加其他列的方法,但无济于事!!我知道还有其他方法,如果有其