Question

因此，我已经有了所需的桌面视图。查看图片。

但是对于移动设备，它看起来像这样。我想在两张卡中间使用换行符或填充符，但不要在桌面上显示它。我该怎么办？

<div class="container-fluid">
  <div class="row">

    <div class="col-sm-5">
      <div class="card bg-dark p-1 border-0 rounded-0">
        <div class="card border-0 rounded-0">

        </div>
      </div>
    </div>

    <div class="col-sm">
      <div class="card bg-dark p-1 border-0 rounded-0">
        <div class="card border-0 rounded-0">

        </div>
      </div>
    </div>

  </div>
</div>

Answer 1

您可以在.row下为div提供一些填充，也可以在移动视图的某些位置提供边距，例如我为767的媒体查询所提供的

@media screen and (max-width : 767px) {
.row div{
padding:10px 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">

    <div class="col-sm-5">
      <div class="card bg-dark p-1 border-0 rounded-0">
        <div class="card border-0 rounded-0">
a
        </div>
      </div>
    </div>

    <div class="col-sm">
      <div class="card bg-dark p-1 border-0 rounded-0">
        <div class="card border-0 rounded-0">
b
        </div>
      </div>
    </div>

  </div>
</div>

如何在移动视图而不是台式机中换行？

1 个答案: