Как центрировать Bootstrap navbar?

Я видел несколько примеров, которые пытаются центрировать навигационную панель Bootstrap, но я не могу заставить их работать. Я пробовал style="text-align:center" на nav, div и ul, но это не имеет никакого эффекта.Как центрировать Bootstrap navbar?

Любые идеи, что я делаю неправильно?

<!DOCTYPE html> 
<html> 

<head> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
</head> 

<body> 
    <div class="container"> 


    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
     <ul class="nav nav-pills"> 
      <li><a role="presentation" href="#">Link1</a></li> 
      <li><a role="presentation" href="#">Link2</a></li> 
      <li><a role="presentation" href="#">Link3</a></li> 
      <li><a role="presentation" href="#">Link4</a></li> 
     </ul> 
     </div> 
    </nav> 

    </div> 
</body> 

</html>

https://plnkr.co/edit/EDf9leSPZVoS4l9dQCfv?p=preview

источник

2016-03-19 4thSpace

Проблема в том, что ур «nav nav-pills li» имеет по умолчанию «float: left» в ur css. Это приводит к тому, что ur text-align никогда не работает, потому что float всегда будет перезаписывать любые другие текстовые свойства.

Один из способов исправить это скопировать следующие объявления в Уре файл CSS:

.nav { 
    padding-left: 0; 
    margin-bottom: 0; 
    list-style: none; 
    text-align: center; 
} 
.nav-pills>li { 
    float: none !important; 
    display: inline-block; 
}

Надеется, что это работает

источник

2016-03-19 17:45:52

Он делает. Благодарю. – 4thSpace

.nav { 
    padding-left: 0px; 
    margin-bottom: 0px; 
    list-style: none; 
    display : table; // Add this 
    margin: auto; // Add this 
}

Добавить последние два стиля CSS в загрузчике 3963 нет линии. https://plnkr.co/edit/HAvko7diBJvtZRB5Vuxn?p=preview

источник

2016-03-19 17:41:45

Я добавил, что в style.css. Это не имеет никакого значения. – 4thSpace

Я проверил его работу. Хорошо, тогда я делаю плункер –

https://plnkr.co/edit/HAvko7diBJvtZRB5Vuxn?p=preview –

Как центрировать Bootstrap navbar?

ответ

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