引导 5.1 - 响应式行/列 - 从"col-12"到"col-md"

Question

我有这个：

<div class="col"></div>

对于移动设备，我有这个：

<div class="col-4"></div>

我想把它们放在一起，但没有按预期工作：

<div class="col-4 col-md"></div>

基本上；md"；必须是灵活的"；col"；，但我不知道如何重置之前的"；col-4"；。

Answer 1

您确定它们在行中吗？因为在这种情况下，它工作正常。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md col-4">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam, ad!
</div>
<div class="col-md col-4">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam, ad!
</div>
<div class="col-md col-4">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam, ad!
</div>
<div class="col-md col-4">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam, ad!
</div>
</div>
</div>

Answer 2

如果我正确理解您的需求，您只需要指定col-md-auto而不是col-md。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-4 col-md-auto">
AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA
</div>
<div class="col-4 col-md-auto">
BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB
</div>
<div class="col-4 col-md-auto">
CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC
</div>
</div>
</div>

Answer 3

刚刚将其添加到每个类中：

.col-md {
flex: 1 0 0%;
width:auto; /*fix width*/
}