wake-up-neo.com

Twitter bootstrap 3 navbar navbar-right außerhalb des navbar-Zusammenbruchs

In Twitter Bootstrap 2.3.2 kann ich Folgendes haben: http://jsfiddle.net/aQwUZ/3/

<div class="navbar navbar-inverse navbar-fixed-top">

        <div class="navbar-inner">
            <div class="container">

                <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a href="#" class="brand">BRAND</a>
                <ul class="nav  pull-right">
                  <li>
                    <a href="#">Fixed Link</a>
                  </li>
                </ul>

                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="#">L1</a></li>
                        <li><a href=#">L2</a></li>
                    </ul>
                </div>

            </div>
        </div>
</div>

Eine Twitter-Bootstrap-Navbar, bei der in der Mobile Responsive-Ansicht "Fixed Link" im Header sichtbar bleibt.

In Bootstrap 3 kann ich nach dem Upgrade meines Codes nur Folgendes haben: http://jsfiddle.net/EC3Ly/4/

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <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>
                    <a class="navbar-brand" href="#">BRAND</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                          <li>
                            <a href="#">Fixed Link</a>
                          </li>
                </ul>
                <div class="navbar-collapse collapse">

                    <ul class="nav navbar-nav">
                         <li><a href="#">L1</a></li>
                        <li><a href=#">L2</a></li>
                    </ul>

                </div>

            </div>
</nav>

in der Mobile Responsive-Ansicht bekomme ich 2 Zeilen ... Ich habe versucht, einen "Navbar-Header" -Node http://jsfiddle.net/EC3Ly/5/ einzuwickeln. Header "ohne Erfolg.

Was habe ich verpasst?

Vielen Dank,

Alexandre

9
heralight

Die zwei Zeilen in der mobilen Navigationsleiste werden durch das Clearfix des Navigationsleisten-Headers verursacht:

.navbar-header {
  .clearfix();

  @media (min-width: @grid-float-breakpoint) {
    float: left;
  }
}

Sie können Medienabfragen und css verwenden, um diesen Clearfix rückgängig zu machen (und vor dem minimierten Dropdown-Menü einen neuen hinzuzufügen).

.navbar-right {float: right !important;}

@media(max-width:767px)
{
    .navbar-right {margin-right:20px;}
    .navbar-header:after 
    {
    clear: none;
    }
    .navbar-nav.navbar-right > li { float: left; }

    .navbar-collapse:before {clear:both;}

    .navbar-collapse {overflow-y: hidden;}
    .navbar-collapse.in {overflow-y: visible;}
    .navbar{border-color: #101010; border-width: 0 0 1px;}
    .navbar-collapse.in > ul {border-color: #101010; border-top:1px double;}
}

}

demo: http://bootply.com/82366

Die Medienabfragen fügen außerdem ein Float-Recht für die Navbar-Rechte auf kleineren Bildschirmen hinzu. Um diesen Code in die Produktion aufzunehmen, werden Sie möglicherweise die Grenzen und möglicherweise auch die navbar-CSS-Übergänge festlegen.

10
Bass Jobsen

Ich hatte das gleiche Problem mit BS3 und der einzige Weg, den ich zur Behebung dieses Problems fand, war die Kombination von pull-left und pull-right.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">BRAND</a>
    </div>
    <div class="navbar-header pull-right">
      <ul class="nav navbar-nav pull-left">
        <li>
          <a href="#">Fixed Link</a>
        </li>
      </ul>
      <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="#">L1</a></li>
        <li><a href="#">L2</a></li>
      </ul>                    
    </div>
  </div>
</nav>

Arbeitsdemo: http://bootply.com/78856

14
Zim

Ich habe es so repariert. Gleich nach der Marke fügen Sie zwei neue Linien mit derselben Klasse und einer zusätzlichen Klasse hinzu.

        <!-- Branding Image -->
        <a class="navbar-brand" href="{{ url('/') }}">Home</a>
        <!-- Fake branding to avoid breaking up navbar -->
        <a class="navbar-brand navbar-brand-fake">Item 1</a>
        <a class="navbar-brand navbar-brand-fake">Item 2</a>

Und fügen Sie dies Ihrer CSS-Datei hinzu:

a.navbar-brand-fake {
    font-size: 15px;
    line-height: 21px;
    margin-left: 2px !important;
}

Home, Item 1 und Item 2 bleiben bei der Größenänderung in der Navbar und die Navbar wird nicht beschädigt.

0
Erhnam

Das Problem liegt an der Stelle, an der die Variable navbar zusammenbricht. Standardmäßig bricht Bootstrap bei 768px zusammen. Wenn Sie dies erhöhen, bricht Ihre navbar früher zusammen und Ihr Problem wird verschwinden.

Am besten passen Sie Ihre Bootstrap-Datei an und ändern Sie den @grid-float-breakpoint in 850px (oder welche Größe Sie auch immer benötigen). Sie können Bootstrap 3 ganz einfach über http://getbootstrap.com/customize/?id=9720390 anpassen.

Hoffe das hilft.

0
RemusT