Question

我已经查看了其他问题和答案，但似乎无法解决这个问题。

我的页面中有一个模态，它将页面内容向左移动了一点。

我做了一个示例小提琴，它显然不是完全相同的代码，但问题是一样的。当您单击TEST时，模态显示，并推送一些内容。

    <div class="modal fade" id="modalContactos" tabindex="-1" role="dialog" aria-labelledby="modalContactos1" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalContactos1">Contactos</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<ul class="navbar-nav mr-1">

            <a class="navbar-brand head" id="contatoshead" data-toggle="modal" data-target="#modalContactos" data-placement="bottom" data-trigger="hover" title="Contatos" href="#">
              TEST
            </a>

        </ul>
</nav>

<div class="container-fluid">

<div class="row" id="sidebartest1">
<p>
Test
</p>
</div>

</div>


<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
<p>
tEST
</p>
</main>

https://jsfiddle.net/x38boerf/

知道如何解决这个问题吗？

提前致谢。

Answer 1

代码中的主要块有一个margin-left属性，其值为auto。将其设置为0，它应该阻止它移动。

澄清一下，它是由应用于主

的“ml-sm-auto”类引起的

Answer 2

please add below code in css.

.ml-sm-auto, .mx-sm-auto {
    margin-left: 0 !important;
}

模态将锥形推向左侧

2 个答案: