У меня есть загрузочная навигационная панель, которая не будет оставаться в линии с кнопкой и окном поиска - как мне сделать это встроенным? - PullRequest
Новая
       19

У меня есть загрузочная навигационная панель, которая не будет оставаться в линии с кнопкой и окном поиска - как мне сделать это встроенным?

1 голос
/ 02 мая 2019 

<nav id="NavbarMaster" class="navbar NavCompression">
  <!-- style="min-height:100px;" -->
  <div id="navToggler" class="container-fluid  TitleBG TitleHeight">
    <div id="navopener" class="Pointer" style="position:fixed;top:0;left:0;right:20%;bottom: calc(100% - 50px);background-color:transparent;"></div>
    <div class="navbar-header">
      <p class="navbar-brand WhiteText standardBtn Pointer">My&nbsp;Area</p>
    </div>

    <div class="navbar-form navbar-right">
      <div class="form-group">
        <input id="txtQuickSearchV2" type="text" class="form-control" placeholder="Search" name="search" />
      </div>
      <button id="btnQuickFind" type="submit" class="btn btn-default">Go</button>
    </div>
  </div>
</nav>

У меня выше navbar, и когда он изменяет размеры для мобильных устройств, он нажимает кнопку «Перейти» и поле поиска в строке (строках) ниже, а невыровняв его правильно и держа его в строке, что я предполагаю, что Navbar-Right должен делать?

Как мне сохранить их все в строке?

Все неклассы начальной загрузки являются косметическими (цвет и т. д.)

РЕДАКТИРОВАТЬ:

Скрипт ссылка

1 Ответ

1 голос
/ 02 мая 2019

Дизайн прерывается на 768px - если вы хотите предотвратить это, вы можете перезаписать ответственные настройки CSS начальной панели начальной загрузки, которые используют @media (min-width: 768px), так же, как я делал в этом jsfiddle: https://jsfiddle.net/ua0xbg17/1/

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

@media (max-width: 768px) {
    .navbar-header {
        float: left;
    }
    .container {
        min-width: 380px;
    }
    .navbar {
        border-radius: 4px;
        min-width: 380px;
    }
    .navbar-nav {
        float: left;
        margin: 0;
    }
    .navbar-left {
        float: left !important;
    }
    .navbar-right {
        float: right !important;
    }
    .navbar-form .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }
    .navbar-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
    .navbar-form {
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
                box-shadow: none;
    }
    .navbar-nav.navbar-right:last-child {
        margin-right: -15px;
    }
    .navbar-form.navbar-right:last-child {
        margin-right: -15px;
    }
    .navbar-text.navbar-right:last-child {
        margin-right: 0;
    } 
}
...