引导5.1 -响应行/col-从"col-12“到”col“
引导5.1 -响应行/col-从"col-12“到”col“
提问于 2022-10-03 10:55:41
我有这个：
<div class="col"></div>对于手机，我有这样的想法：
<div class="col-4"></div>我想把他们联系在一起，但不像预期的那样工作：
<div class="col-4 col-md"></div>基本上，"md“必须是灵活的"col"，但我不知道如何重新设置以前的"col-4”。
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-10-03 11:01:52
只是把这个添加到每个类中：
.col-md {
flex: 1 0 0%;
width:auto; /*fix width*/
}Stack Overflow用户
发布于 2022-10-03 12:55:48
你确定他们排成了一排吗？因为在这种情况下它正常工作。
<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>
Stack Overflow用户
发布于 2022-10-03 11:41:31
如果我正确理解了您的需求，您只需指定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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73934412
复制相关文章
相似问题
腾讯云开发者
