如何在css中解决这个div覆盖问题答案

【问题标题】：how to solve this div overlay problem in css如何在css中解决这个div覆盖问题
【发布时间】：2020-05-31 02:33:26
【问题描述】：

如何解决div 覆盖问题在这里我有一个div 在这个div 我已经添加了两个类col-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>

【问题讨论】：

我认为您有一些导致问题的自定义 css。
您可能需要在
之后添加引导容器类，然后是您的 col-sm-6 divs
附图不是很清楚？请附上一点清晰的图像，如果您添加页面的工作sn-p会非常有帮助。

标签： html css bootstrap-4 responsive-design

【解决方案1】：

发现移动网格类 (col-xs-12) 丢失。请尝试以下 sn-p。

<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>

【讨论】：

【解决方案2】：

您应该在 bootstrap4 中为移动设备尺寸设置 div“col-12”。“col-sm-6”不适用于小于 557px 的尺寸。并使您的 div 的“浮动”正确。

.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>

【讨论】：