Html 自举4，can'；t按精确的百分比设置卡片的宽度

看看这个。除非我错过了文档中的某个地方，否则我应该能够通过css手动设置

卡

元素的宽度。我使用的是

卡片组中的卡片，但是如果这就是造成混乱的原因，那么文档中也没有关于它的内容

无论如何，正如您从代码层中看到的，宽度似乎完全被忽略了。。。即使在元素检查时显示正确，最终计算值也非常不同

例如，在大屏幕上，所有6张卡都显示在一行上，不符合
宽度：25%
。在小屏幕上，一张卡确实占据了50%，但下一张卡会跳到下一行，而不是并排两张

<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-body">
                <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-body">
                <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="card mb-4">
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body">
                <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="card mb-4">
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body">
                <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="card mb-4">
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body">
                <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="card mb-4">
            <img class="card-img-top img-fluid" src="//placehold.it/500x300" alt="Card image cap">
            <div class="card-body">
                <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>
</div>



.card {
    width: 50%;
}

@media (min-width: 768px) {
    .card {
        width: 33%;
    }
}

@media (min-width: 1200px) {
    .card {
        width: 25%;
    }
}


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

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

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

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

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

6卡片标题
此卡片具有以下支持文本，作为附加内容的自然引入
上次更新是在3分钟前

.卡片{
宽度：50%；
}
@介质（最小宽度：768px）{
.卡片{
宽度：33%；
}
}
@介质（最小宽度：1200px）{
.卡片{
宽度：25%；
}
}
此时，
宽度
属性将不适用于
.card-deck.card
。您必须使用
flex-basis
和
max-width
编写
width
。代码如下

.card {
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  max-width: 100%;
}
@media (min-width: 576px){
  .card {
    flex-basis: calc(50% - 30px); /* Remove margin from total card width */
    flex-grow: 0;
    flex-shrink: 0;
    max-width: calc(50% - 30px); /* Remove margin from total card width */
  } 
}

@media (min-width: 768px) {
  .card {
    flex-basis: calc(33.3333% - 30px); /* Remove margin from total card width */
    max-width: calc(33.3333% - 30px); /* Remove margin from total card width */
  }
}

@media (min-width: 1200px) {
  .card {
    flex-basis: calc(25% - 30px); /* Remove margin from total card width */
    max-width: calc(25% - 30px); /* Remove margin from total card width */
  }
}

引导集
.card deck.card
css属性
左边距：15px；右边距：15px这就是为什么卡不能全宽显示的原因。此时需要将
边距宽度
从总卡片
宽度
中删除

这是你的电话号码

这将是不好的，因为引导卡的设计是不同的。对于上述设计，您必须更改
html
，它将不需要使用自定义css属性

这是你的电话号码

已编辑

如果窗口宽度小于或等于
575.98px
与
相同，则从
.card
类中删除
margin
；柔性流：行换行。如果您希望在小型设备中每行有两张卡。像这样做

.card {
  flex-basis: calc(50% - 30px);
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: 15px;
  margin-right: 15px;
  max-width: calc(50% - 30px);
}

添加
d-flex flex wrap
类和
卡片组

<div class="card-deck d-flex flex-wrap"></div>

此时，
width
属性将不适用于
.card-deck.card
。您必须使用
flex-basis
和
max-width
编写
width
。代码如下

.card {
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  max-width: 100%;
}
@media (min-width: 576px){
  .card {
    flex-basis: calc(50% - 30px); /* Remove margin from total card width */
    flex-grow: 0;
    flex-shrink: 0;
    max-width: calc(50% - 30px); /* Remove margin from total card width */
  } 
}

@media (min-width: 768px) {
  .card {
    flex-basis: calc(33.3333% - 30px); /* Remove margin from total card width */
    max-width: calc(33.3333% - 30px); /* Remove margin from total card width */
  }
}

@media (min-width: 1200px) {
  .card {
    flex-basis: calc(25% - 30px); /* Remove margin from total card width */
    max-width: calc(25% - 30px); /* Remove margin from total card width */
  }
}

引导集
.card deck.card
css属性
左边距：15px；右边距：15px这就是为什么卡不能全宽显示的原因。此时需要将
边距宽度
从总卡片
宽度
中删除

这是你的电话号码

这将是不好的，因为引导卡的设计是不同的。对于上述设计，您必须更改
html
，它将不需要使用自定义css属性

这是你的电话号码

已编辑

如果窗口宽度小于或等于
575.98px
与
相同，则从
.card
类中删除
margin
；柔性流：行换行。如果您希望在小型设备中每行有两张卡。像这样做

.card {
  flex-basis: calc(50% - 30px);
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: 15px;
  margin-right: 15px;
  max-width: calc(50% - 30px);
}

添加
d-flex flex wrap
类和
卡片组

<div class="card-deck d-flex flex-wrap"></div>

默认情况下，卡组卡上使用的flexbox为
flex:1 0%
，这意味着卡不会“增长”到宽度。您可以通过在卡上使用flex fill来覆盖这一点。也可以在CSS选择器中使用
.card deck.card
特性

<div class="container">
    <div class="card-deck">
        <div class="card mb-4 flex-fill">
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body">
                <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>
        ... (more cards)
    </div>
</div>


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

... （更多卡片）

默认情况下，卡组卡上使用的flexbox为
flex:1 0%
，这意味着卡不会“增长”到宽度。您可以通过在卡上使用flex fill来覆盖这一点。也可以在CSS选择器中使用
.card deck.card
特性

<div class="container">
    <div class="card-deck">
        <div class="card mb-4 flex-fill">
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body">
                <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>
        ... (more cards)
    </div>
</div>


1卡片标题
这是一张较长的卡片，下面的支持文本为nat