Centered Bootstrap 3 нав-бар

Внутри приложения Rails, и используя Bootstrap 3, мы пытаемся построить навигации, со следующими характеристиками:Centered Bootstrap 3 нав-бар

Логотип, выравнивание по левому краю
основного меню, в центре
знак/регистрация меню, выровненный по правой

до сих пор, это наш _header.html.erb частичный файл макета:

<header class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="container"> 
    <%= link_to "App Name", root_path, id: "logo" %> 
    <nav> 
     <ul id="main_menu" class="nav navbar-nav navbar-left"> 
     <li><%= link_to "Features", features_path %></li> 
     <li><%= link_to "Pricing", pricing_path %></li> 
     <li><%= link_to "Blog", '#' %></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><%= link_to "Sign In", '#' %></li> 
     <li><%= link_to "Sign Up", signup_path %></li> 
     </ul> 
    </nav> 
    </div> 
</header>

EDIT: это наш сгенерированный HTML код:

<header class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="container"> 
    <a id="logo" href="/">App Name</a> 
    <nav> 
     <ul id="main_menu" class="nav navbar-nav"> 
     <li><a href="/features">Features</a></li> 
     <li><a href="/pricing">Pricing</a></li> 
     <li><a href="#">Blog</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Sign In</a></li> 
     <li><a href="/signup">Sign Up</a></li> 
     </ul> 
    </nav> 
    </div> 
</header>

Мы пытались следующий код CSS:

/* header */ 

#logo { 
    float: left; 
    margin-right: 10px; 
    font-size: 1.7em; 
    color: #fff; 
    text-transform: uppercase; 
    letter-spacing: -1px; 
    padding-top: 9px; 
    font-weight: bold; 
} 

#logo:hover { 
    color: #fff; 
    text-decoration: none; 
} 

#main_menu { 
    margin: 0 auto; 
    text-align:center; 
} 

#main_menu li { 
    float:none; 
    display:inline-block; 
}

Это не сработало (ничего не меняет).

Мы также пытались:

/* Code not reproduced for brevity */ 

#main_menu { 
      width: 100%; 
      text-align:center; 
     } 

     #main_menu li { 
      float:none; 
      display:inline-block; 
     }

Это не сработало, и даже сломал наш макет:

enter image description here

Как мы можем центрировать <ul id="main_menu" class="nav navbar-nav navbar-left">...</ul> навигационную панель, не нарушая макет?

источник

2015-06-30 Thibaud Clement

Независимо от того, что такое разметка, это не HTML. Если у вас нет проблемы с кодом вашего шаблона, генерирующим правильную разметку, отправьте только компилируемый HTML. – cimmanon

В Bootstrap бренд navbar заключен в тег 'a' класса' navbar-brand', возможно, это причина вашей проблемы – Cyzanfar

@cimmanon done;) –

Вы должны использовать col-xs-X сетки, чтобы сделать это, я уже вставили вам рабочий код здесь:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
 
    <style type="text/css"> 
 
    .main_menu { 
 
     width: 100% 
 
    } 
 

 
    .main_menu li { 
 
     float:none; 
 
     display:inline-block; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <header class="navbar navbar-fixed-top navbar-inverse"> 
 
    <div class="container"> 
 
     <nav> 
 
     <div class="col-xs-3"> 
 
      <a class="navbar-brand" href="/">App Name</a> 
 
     </div> 
 
     <div class="col-xs-6 text-center"> 
 
     <ul class="main_menu nav navbar-nav"> 
 
      <li><a href="/features">Features</a></li> 
 
      <li><a href="/pricing">Pricing</a></li> 
 
      <li><a href="#">Blog</a></li> 
 
     </ul> 
 
     </div> 
 
     <div class="col-xs-3"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#">Sign In</a></li> 
 
      <li><a href="/signup">Sign Up</a></li> 
 
     </ul> 
 
     </div> 
 
     </nav> 
 
    </div> 
 
    </header> 
 
</body> 
 
</html>

PS: Попробуйте надеть» t использовать селекторы id в css, this is why.

источник

2015-06-30 13:07:08

Спасибо. Это работало как шарм. Что касается селекторов идентификаторов в CSS: должным образом отмечен. –

Ваш бренд navbar должен быть заключен в тег a. Изменение <%= link_to "App Name", root_path, id: "logo" %> в

<a class="navbar-brand" href="<%= root_path %>">APP NAME</a>

источник

2015-06-30 11:59:28 Cyzanfar

Это, на самом деле. Я только что редактировал вопрос с сгенерированным кодом html (а не только с кодом erb), и вы можете видеть, что у нас есть App Name –

Centered Bootstrap 3 нав-бар

ответ

Смежные вопросы