模态向左推送内容

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

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

澄清一下，这是由应用于 main 的“ml-sm-auto”类引起的

Answer 2

please add below code in css.

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