Question

我正在使用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>

谢谢！

Answer 1

您可以尝试仅将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>

如何在有一个元素的情况下在引导程序中显示一列，但在有两个元素的情况下如何显示两列

1 个答案: