html - twitter bootstrap项的重叠边框

使用twitter-bootstrap-2.0.4

...some topbar code here....
div.container-fluid
  div.content
    div.row-fluid
      div.span2
        div.menuLeft
          a(class='menuLeftItem', href="http://localhost:3000") Explore
          br/
          a(class='menuLeftItem', href="http://localhost:3000") My Playlists
          br/
          a(class='menuLeftItem', href="http://localhost:3000") Challenge
          br/
          a(class='menuLeftItem', href="http://localhost:3000") Socialize
          br/

我的CSS：

* { margin: 0; padding:0; }

html, body {
background-color: red;
height: 100%;
width: 100%;
overflow: hidden;
}
body {
  padding-top: 58px; /* 40px to make the container go all the way to the bottom of the topbar */
  padding-left: 0px;
  padding-right: 0px;
}
.container-fluid {
  background-color: black;
}
.content {
  background-color: blue;
}
.span2 {
  background-color: green;
}

.menuLeftItem {
  color:white;
  /*font*/
  font-size:13px;
  font-weight:bold;
  line-height:1;
  border: 1px solid white;
}

我的menuLeftItems没有正确对齐。特别是那些元素的边界是重叠的。请告诉我如何正确对齐元素。我也希望每个menuLeftItem都采用与其包含元素span2相同的宽度。我尝试了.menuLeftItem的width = 100％。但这不会生效。

我的目标是为不同的屏幕尺寸创建固定的页面布局。因此，我正在尝试使用流畅的布局。

任何帮助表示赞赏

最佳答案

确定修复它。我需要在类menuLeftItem中添加display：inline-block。我在另一个堆栈线程上找到了这个作为参考
HTML/CSS - Extend element width to visible area (beyond width of containing element)