0

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% を試しました。しかし、それは効果がありません。

私の目標は、さまざまな画面サイズに対応する固定ページ レイアウトを作成することです。したがって、流動的なレイアウトを使用しようとしています。

どんな助けでも大歓迎です

4

1 に答える 1

0

わかりました修正しました。クラス menuLeftItem に display: inline-block を追加する必要がありました。これは、別のスタック スレッドのリファレンスとして見つかりました HTML/CSS - 要素の幅を表示領域まで拡張します (要素を含む幅を超えて)

于 2012-06-08T21:58:32.343 に答える