gpt4 book ai didi

html - 如何在有一个元素时在 bootstrap 中显示一列,而在有两个元素时显示两列

转载 作者:太空宇宙 更新时间:2023-11-04 06:23:45 28 4
gpt4 key购买 nike

我正在使用 Bootstrap 中的行类。该行有两列。一个用于 x,一个用于 Y。在动态情况下,行内将有 X 列或 Y 列或两列。我的查询是因为一行可以有 12 列,所以当我只有 X 列时,它将采用 col-md-12,当有 X 和 Y 双列时,X 和 Y 将采用 col-md-6 和 col -md-6 分别在行内。

例子

<div class="row">
<div class="col-md-6">x</div>
<div class="col-md-6">y</div>
</div>

当只有一个来自数据库的元素(X)出现时

<div class="row">
<div class="col-md-12">x</div>
</div>

谢谢!

最佳答案

您可以尝试将 col 类设置为所有 div 它会自动调整宽度。然而,它在所有设备上的行为都是一样的。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<body>
<div class="container-fluid">
<div class="row">
<div class="col" style="background-color:red;">Div 1</div>
</div>

<div class="row">
<div class="col" style="background-color:yellow;">Div 1</div>
<div class="col" style="background-color:orange;">Div 2</div>
</div>
</div>

关于html - 如何在有一个元素时在 bootstrap 中显示一列,而在有两个元素时显示两列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55261527/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com