如何解决 div 在 css 中的叠加问题

Question

如何解决div这里的覆盖问题我有一个div在这个div我添加了两个classcol-sm-6。但是当我检查响应时，它会超过 div。我不知道如何解决。谁能帮帮我。

我附上了你可以看到的输出图像:)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="block">
  <div class="row">
    <div class="col-sm-6">
      <p><strong>Showing 1 to 6 of 6 entries</strong></p>
    </div>

    <div class="col-sm-6" style="top: -8px;">
      <div class="pagination">
        <button class="btn btn-link previous">Previous</button>
        <button class="btn btn-info number">1</button>
        <button class="btn btn-link next">Next</button>
      </div>
    </div>
  </div>
</div>

Answer 1

发现移动网格 class (col-xs-12) 丢失。请尝试以下代码段。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="block">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <p><strong>Showing 1 to 6 of 6 entries</strong></p>
            </div>

            <div class="col-xs-12 col-sm-6">
                <div class="pagination">
                    <button class="btn btn-link previous">Previous</button>
                    <button class="btn btn-info number">1</button>
                    <button class="btn btn-link next">Next</button>
                </div>
            </div>
        </div>
    </div>

Answer 2

您应该在 bootstrap4 中为手机尺寸设置 div "col-12"。"col-sm-6" 不适用于尺寸小于 557px.and 让您的 div "float" 没错。

.float-right{
  float:rigth !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="block">
  <div class="row">
    <div class="col-sm-6 col-12 float-right">
      <p><strong>Showing 1 to 6 of 6 entries</strong></p>
    </div>

    <div class="col-sm-6 col-12 float-right" style="top: -8px;">
      <div class="pagination">
        <button class="btn btn-link previous">Previous</button>
        <button class="btn btn-info number">1</button>
        <button class="btn btn-link next">Next</button>
      </div>
    </div>
  </div>
</div>

如何解决 div 在 css 中的叠加问题

how to solve this div overlay problem in css

html

css

responsive-design

bootstrap-4