html - 推特 Bootstrap 元素的重叠边界

Question

使用 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%。但是没有生效。

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

感谢任何帮助

Answer 1

好的，修复了它。我需要将 display: inline-block 添加到 menuLeftItem 类中。我发现这是在另一个堆栈线程上的引用 HTML/CSS - Extend element width to visible area (beyond width of containing element)