SORU
1 Kasım 2013, Cuma


Bootstrap, merkez ve sağ hizalı öğeleri sol gezinti çubuğu

Bootstrap 3ne çok dostu bir platform gezinti çubuğu oluşturmak için bir yol olduğunu sağda ortada solda menü öğeleri Logosu ve B Logosu var mı?

Burada ben şimdiye kadar denedim ne olduğunu, ve Bir Logo sağda solda, menü öğeleri soldaki logo ve Logo B yanında böylece hizalanmış oluyor.

<div class="navbar navbar-fixed-top navbar-custom ">
  <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="#"><span class="navbar-logo">Logo_A</span></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Menu Item 1</a></li>
        <li><a href="#contact">Menu Item 2</a></li>
        <li><a href="#about">Menu Item 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
      </ul>
    </div>
  </div>
</div>

CEVAP
3 Aralık 2013, Salı


Bu bulduğum en iyi yaklaşım

http://bootply.com/98314

<nav class="navbar navbar-default" 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>
  <a class="navbar-brand" href="#">Brand</a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

CSS:

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin: auto;
}

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • erikbjgn's channel

    erikbjgn's c

    12 Mayıs 2008
  • ModNation Racers H.Q.

    ModNation Ra

    31 Ocak 2010
  • The Brister

    The Brister

    10 ŞUBAT 2008