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

  • Mary Jane Tauyan

    Mary Jane Ta

    20 AĞUSTOS 2009
  • MrMimoB

    MrMimoB

    11 NİSAN 2011
  • REK Roth Productions

    REK Roth Pro

    8 Ocak 2011