2

Twitter Bootstrapのバージョン 2.0.4 で、ナビゲーション バーにボックス シャドウを追加したところ、うまく機能しました。（下の画像を参照）

ここに画像の説明を入力

最近、バージョン 2.2.1 にアップグレードして同じことを試みましたが、ナビゲーション バーの下にボックスの影が表示されません。これが私の現在のスタイルです：

.navbar {
overflow: visible;
margin-bottom: 18px;
color: #fff;
*position: relative;
*z-index: 2;
}

.navbar-inner {

min-height: 40px;
padding-left: 20px;
padding-right: 20px;
background-color: #fafafa;

background-color: #fafafa;
background-image: -moz-linear-gradient(top, #4e8ece, #356aa0);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4e8ece), to(#356aa0));
background-image: -webkit-linear-gradient(top, #4e8ece, #356aa0);
background-image: -o-linear-gradient(top, #4e8ece, #356aa0);
background-image: linear-gradient(to bottom, #4e8ece, #356aa0);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 );

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.065);
*zoom: 1;

}

2.2.1 でドロップ シャドウが表示されない理由を教えてください。

4

1 に答える 1

1

報告されたバグでは、可能な解決策は次のようになります。

.box-shadow(@shadow1, @shadow2) {
  -webkit-box-shadow: @shadow1, @shadow2;
     -moz-box-shadow: @shadow1, @shadow2;
          box-shadow: @shadow1, @shadow2;
}
.box-shadow(@shadow1, @shadow2, @shadow3) {
  -webkit-box-shadow: @shadow1, @shadow2, @shadow3;
     -moz-box-shadow: @shadow1, @shadow2, @shadow3;
          box-shadow: @shadow1, @shadow2, @shadow3;
}

最新バージョンの2.1.2-WIP には次のコードがあります。

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}
于 2012-11-11T15:36:35.057 に答える