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

вопрос создан в Thu, May 2, 2019 12:00 AM

р>

<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-право должно делать?

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

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

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

Ссылка Fiddle

    
1
  1. Создайте скрипку, чтобы люди могли хотя бы увидеть, в чем дело.
    2019-05-02 15: 16: 25Z
  2. @ Стрелок добавил один
    2019-05-02 15: 19: 08Z
1 ответ                              1                         

Дизайн ломается на 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;
    } 
}
    
1
2019-05-02 17: 23: 05Z
  1. Вы абсолютная легенда, спасибо.
    2019-05-02 18: 45: 46Z
  2. : o) Рад помочь!
    2019-05-02 18: 55: 09Z
источник размещен Вот