Установите margin-top в соответствии с высотой другого элемента - PullRequest
Новая
       4

Установите margin-top в соответствии с высотой другого элемента

0 голосов
/ 16 января 2020

У меня есть два navbar's (один под другим). Моя цель состоит в том, чтобы оба фиксировались сверху, поэтому я применил к обоим (фиксированный верх).

Чтобы другие навигационные панели подходили друг к другу, я использовал маржинальный верх. Моя проблема в том, что эта вершина поля не реагирует, если вы увеличиваете или уменьшаете размер экрана, панель навигации не идеально подходит под другую.

Есть ли способ правильно подогнать их или рассчитать необходимую вершину поля ?

ДЕМО

HTML

<nav class="navbar navbar-expand-md navbar-light bg-white MyNavBar fixed-top" >
        <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2" id="dual-collapse2">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="btn"><img src="home.svg"></a>
                </li>
            </ul>
        </div>
        <div class="mx-auto order-0">
            <a class="btn"><img src=".logo-home.svg"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dual-collapse2">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse w-100 order-3 dual-collapse2" id="dual-collapse2">
            <ul class="navbar-nav ml-auto">
                <div class="row">
                <li class="nav-item">
                 <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
                </li>
                <li class="nav-item">
                      <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
                </li>
                <li class="nav-item">
                     <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
                </li>
                <li class="nav-item">
                      <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
                </li>
                <li class="nav-item" style="width: 57px;">
                     <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
                </li>
            </div>
            </ul>
        </div>
    </nav>
<nav class="navbar navbar-expand-md navbar-light bg-white fixed-top Mytoolbar" style="margin-top: 74px;">
      <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse22" id="dual-collapse22">
          <ul class="navbar-nav mr-auto" id="dual-collapse22">
            <li class="nav-item folder_category">
               <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
            </li>
            <li class="nav-item btn-upload">
              <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
            </li>
          </ul>
      </div>
      <div class="mx-auto order-0">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dual-collapse22">
          <span class="navbar-toggler-icon"></span>
      </button>
        <ul class="navbar-nav navbar-collapse collapse w-100 order-3" id="dual-collapse22">
          <li class="nav-item btn-upload">
              <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
            </li>
            <li class="nav-item btn-upload">
              <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
            </li>
        </ul>

      </div>
      <div class="navbar-collapse collapse w-100 order-3 dual-collapse22" id="dual-collapse22">
          <ul class="navbar-nav ml-auto">
           <li class="nav-item btn-upload">
              <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
            </li>
            <li class="nav-item">
              <a class="nav-link">
            </a>
            </li>           
            <li class="nav-item">
              <a class="toggle-third nav-link">
                <img src="ra.svg" >
              </a>
            </li>
            <li class="nav-item btn-upload">
              <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
            </li>
            <li class="nav-item btn-upload">
              <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
            </li>
          </ul>
      </div>
  </nav>

1 Ответ

1 голос
/ 16 января 2020

Это должно работать:

  1. Обернуть обе панели навигации в один и тот же div
  2. Дайте этому div класс fixed-top
  3. Удалите fixed-top класс с обеих навигационных панелей
  4. удалить строку css второго navbar (margin-top: 74px;)

См. Ниже: 

.MyNavBar {
  box-shadow: 0px 12px 17px rgba(188, 188, 203, 0.14);
  border-bottom: 1px solid #BCBCCB;
  z-index: 9999;
}

.MyNavBar img {
  cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="fixed-top">
  <nav class="navbar navbar-expand-md navbar-light bg-white MyNavBar">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2" id="dual-collapse2">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="btn"><img src="home.svg"></a>
        </li>
      </ul>
    </div>
    <div class="mx-auto order-0">
      <a class="btn"><img src=".logo-home.svg"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dual-collapse2">
                <span class="navbar-toggler-icon"></span>
            </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2" id="dual-collapse2">
      <ul class="navbar-nav ml-auto">
        <div class="row">
          <li class="nav-item">
            <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
          </li>
          <li class="nav-item" style="width: 57px;">
            <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
          </li>
        </div>
      </ul>
    </div>
  </nav>
  <nav class="navbar navbar-expand-md navbar-light bg-white Mytoolbar">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse22" id="dual-collapse22">
      <ul class="navbar-nav mr-auto" id="dual-collapse22">
        <li class="nav-item folder_category">
          <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
        </li>
        <li class="nav-item btn-upload">
          <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
        </li>
      </ul>
    </div>
    <div class="mx-auto order-0">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dual-collapse22">
          <span class="navbar-toggler-icon"></span>
      </button>
      <ul class="navbar-nav navbar-collapse collapse w-100 order-3" id="dual-collapse22">
        <li class="nav-item btn-upload">
          <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
        </li>
        <li class="nav-item btn-upload">
          <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
        </li>
      </ul>

    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse22" id="dual-collapse22">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item btn-upload">
          <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">
          </a>
        </li>
        <li class="nav-item">
          <a class="toggle-third nav-link">
            <img src="ra.svg">
          </a>
        </li>
        <li class="nav-item btn-upload">
          <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
        </li>
        <li class="nav-item btn-upload">
          <a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>

<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
...