Менюто за свиване на навигационната лента на Bootstrap 3 вляво за елементи от лявата и дясната навигационна лента

Имам навигационна лента на Bootstrap 3 с леви навигационни елементи и десни навигационни елементи (както е показано по-долу).

Навигационни елементи отляво и отдясно

Когато се свие, искам и превключвателят на навигационната лента (известен още като „меню за хамбургер“) и елементите му да бъдат подравнени вляво.

Моят код досега:

<nav class="navbar navbar-default custom-navbar" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="/bg#">Left</a></li>
        <li><a href="/bg#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
      <li><a href="/bg#about">Right</a></li>
      <li><a href="/bg#contact">Right</a></li>
    </ul>
  </div>
</nav>

CSS за превключване на навигационната лента отляво е:

@media (max-width:767px) {
    .custom-navbar .navbar-right {
        float: right;
        padding-right: 15px;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li {
        float: left;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li > a {
        padding:8px 5px;
    }
    .custom-navbar .navbar-toggle {
        float: left;
        margin-right: 0
    }
    .custom-navbar .navbar-header {
        float: left;
        width: auto!important;
    }
    .custom-navbar .navbar-collapse {
        clear: both;
        float: none;
    }
}

Добавих стил "дърпане надясно", за да подравня елементите, без успех.

"Navbar-right" работи зле. Всъщност с него ще имам и двата елемента отдясно на един ред. Използвайки "издърпване надясно", те работят като единични редове, но все пак остават отдясно.

Това ме оставя с:

  • Менюто за хамбургери вляво (по желание),
  • Елементите на навигационната лента отляво (по желание),
  • Елементите в дясната лента за навигация все още са отдясно (искам това да бъде поправено!).

Крайният резултат:

Последните два елемента все още са вдясно

Кодовият фрагмент е тук.


javascript html css twitter-bootstrap-3 navbar
person loretoparisi    schedule 08.07.2015    source източник

Отговори (2)


arrow_upward
5
arrow_downward

Направих няколко корекции на вашия CSS и маркиране, които можете да видите тук.

Едно нещо, което бих посочил, е, че pull-right и другите pull и push класове са за пренареждане на колони на мрежата.

person Daniel Waghorn    schedule 08.07.2015
comment
да Опитвах се да използвам navbar-right без успех! Също така добро решение! - person loretoparisi; 09.07.2015

arrow_upward
3
arrow_downward

Можете да използвате правилото !important, за да замените поведението по подразбиране на изтегляне надясно.

@media (max-width:767px) {
 .nav.navbar-nav.pull-right {
   float: left !important;
 }
}

Изход в устройства с ‹768px:

Текст, подравнен вляво вдясно

Bootply

person m4n0    schedule 08.07.2015