Html 如何居中引导导航栏？_Html_Css_Twitter Bootstrap

Html 如何居中引导导航栏？

html css twitter-bootstrap

Html 如何居中引导导航栏？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我已经看到了一些尝试将引导导航栏居中的示例，但我无法让它们中的任何一个正常工作。我在nav、div和ul上尝试了style=“text align:center”，但没有任何效果知道我做错了什么吗 <!DOCTYPE html> <html> <head>  <link rel="stylesheet" href="https://maxcdn.bo

我已经看到了一些尝试将引导导航栏居中的示例，但我无法让它们中的任何一个正常工作。我在

nav

、

div

和

ul

上尝试了

style=“text align:center”

，但没有任何效果

知道我做错了什么吗

<!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>

在bootstrap 3963 no line中添加最后两个css样式。

问题在于，您的“导航”css中有一个默认的“float:left”。这使得您的文本对齐永远无法工作，因为float将始终覆盖任何其他文本属性

解决此问题的一种方法是复制ur css文件中的下一个声明：

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

希望这能起作用。问题是你的“导航”css中有一个默认的“float:left”。这使得您的文本对齐永远无法工作，因为float将始终覆盖任何其他文本属性

解决此问题的一种方法是复制ur css文件中的下一个声明：

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

希望这能起作用

我将其添加到style.css中。没什么区别，我已经检查过了。好的，那么我正在制作一个plunkerI，我将其添加到style.css中。没什么区别，我已经检查过了。好吧，那我要做一个扑通球