twitter bootstrap项目的重叠边界答案

【问题标题】：twitter bootstrap overlapping borders of itemstwitter bootstrap项目的重叠边界
【发布时间】：2012-06-09 05:58:32
【问题描述】：

使用 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 尝试了宽度 = 100%。但是没有生效。

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

感谢任何帮助

【问题讨论】：

如何增加上面类 menuLeftItem 的元素“a”的宽度？似乎没有任何效果。

标签： html css twitter-bootstrap

【解决方案1】：

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

【讨论】：