Bootstrap似乎弄乱了我的导航栏

Question

在我的视图模板中，我正在使用引导程序，但正在通过CSS添加自己的导航栏。但是这些项目不会与中心对齐。 当我取出引导时，它们会完美对齐。这真的让我感到沮丧。 任何帮助都感激不尽。

这是我的哈巴狗模板

html
  head
    title Articles
    link(rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css")
    link(rel='stylesheet' href='/css/style.css')
  nav.top
    ul
      li 
        a(href='/') HomePage
      if user
        li 
          a(href='/article/add') Add Article
        li 
          a(href ='/users/logout') Logout         
      else
        li 
          a(href ='/users/register') Register
        li 
          a(href='/users/login') Login
  -------------------------------

Css

.top{
  display : flex;
  background : white;
  align-items : center;
}
.top ul li {
  display : inline;
}