2015-09-06 2 views
0

Я хотел бы использовать навигацию для своего нижнего колонтитула, точно так же, как она используется в качестве стандартного меню для приложений ASP.NET MVC по умолчанию. Стиль выглядит хорошо, и это имеет смысл для меня, поэтому придерживаться этой конфигурации было бы отлично. Как я могу сосредоточиться на этом без изменения CSS? Меня беспокоит то, что, поскольку заголовок использует class="nav navbar-nav", если я скорректировал CSS nav, чтобы сказать, что text-align:center; испортит мое главное меню в верхней части страницы. Любые рекомендации?Как центрировать выравнивание строки Nav

Примечание: Я знаю, что я оправдал свои пункты меню главного навигационного бара ранее, используя что-то вроде style="text-align:center;", но я не помню, как это сделать.

<footer> 
     <div class="container-fluid"> //Necessary? 
      <div class="row"> //Necessary? 
       <div class="col-md-12"> //Necessary? 
         <ul class="nav navbar-nav" style="text-align:center;"> //Trying to adjust the style to center align 
          <li class="dropdown"> 
           <a class="dropdown-toggle" role="button" aria-expanded="false" href="#" data-toggle="dropdown">Home <span class="caret"></span></a> 
           <ul class="dropdown-menu" role="menu"> 
            <li>@Html.ActionLink("Item 1", "Index", "Home", protocol: null, hostName: null, fragment: "item1", routeValues: null, htmlAttributes: null)</li> 
            <li>@Html.ActionLink("Item 2", "Index", "Home", protocol: null, hostName: null, fragment: "item2", routeValues: null, htmlAttributes: null)</li> 
            <li>@Html.ActionLink("Item 3", "Index", "Home", protocol: null, hostName: null, fragment: "item3", routeValues: null, htmlAttributes: null)</li> 
           </ul> 
          </li> 
          <li>@Html.ActionLink("About", "About", "Home")</li> 
          <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
         </ul> 
       </div> 
      </div> 
     </div> 
</footer> 

EDIT:

Я обнаружил, что в <ul> тег делает следующее создает внешний вид основной навигационной панели

<ul class="nav navbar-nav"> 

Кроме того, есть в navbar-left и navbar-right классы которые оправдывают навигационную панель как влево, так и вправо, но центра нет. Любые рекомендации по созданию navbar-center?

ответ

0

Если вы можете получить доступ к CSS,

footer ul li { 
text-align:center; 
} 

или HTML

<div class="row" style="text-align:center;"> 

Fiddle

+0

это не сработало для меня .. – Matthew

+0

Золотой мяч: нижний колонтитул. контейнер-жидкость {margin: 0 auto; выравнивания текста: центр;}; Он будет работать только в том случае, если у вас есть фиксированная ширина над контейнеровозной жидкостью или используйте% для обработки штанги. –

0

Попробуйте этот код? установите ширину для div ширину вашего навигационного бара <div class="col-md-12" style="margin-left:auto;margin-right:auto;width:___;">

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