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

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

twitter bootstrap重叠项目的边框

1 个答案: