Модальное толкание влево - PullRequest
0 голосов
/ 02 мая 2018

Я смотрел на другие вопросы и ответы, но не могу это исправить.

У меня есть модал на моей странице, который немного смещает содержимое моей страницы влево.

Я сделал примерную скрипку, очевидно, это не совсем тот же код, но проблема та же. Когда вы нажимаете 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/

Есть идеи, как это решить?

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 02 мая 2018
please add below code in css.

.ml-sm-auto, .mx-sm-auto {
    margin-left: 0 !important;
}
0 голосов
/ 02 мая 2018

Основной блок в вашем коде имеет свойство margin-left со значением auto. Установите это в 0, и это должно препятствовать тому, чтобы это двигалось.

Для пояснения, это вызвано классом "ml-sm-auto", примененным к main

...