1

通常の Web ブラウザでは次のようになります。ここに画像の説明を入力

ブートストラップの次のルールを別のファイル コードで上書きしました。以下に示します。

  body {
        margin-left: 8px;
        margin-right:8px;

    }

    div .span8 {
        border: 2px solid rgb(121, 25, 77);
        border-radius: 10px 10px 10px;
        background-color: rgb(188, 187, 178);
    }

    div .span2 {
        border: 2px solid rgb(163, 43, 70);
        border-radius: 10px 10px 10px;
        background-color: rgb(240, 225, 200);
    }
    .navbar-inner {
        background-image: linear-gradient(to bottom, #04998D, #f2f2f2);
    }

    .navbar .nav > li > a {
        color: #D33333;
        text-shadow: 0 1px 0 #19B95F;
    }

    .navbar .nav li.dropdown.open > 
    .dropdown-toggle, .navbar .nav li.dropdown.active > 
    .dropdown-toggle, .navbar .nav li.dropdown.open.active > 
    .dropdown-toggle {
         color: #555555;
         background-color: #83C0AF;
      }

      .dropdown-menu {
          background-color: #64bead;
          background-image: linear-gradient(to bottom, #04998D, #f2f2f2);
      }

私の問題は、任意のモバイル デバイスから閲覧すると、navbar-inner に変化が見られないことです。その他は変更しています。私は、bootstrap-responsive.css ファイルを変更する必要があることを知っています。しかし、私はそれをどのように変更するかわかりません。

モバイルでフォローするようなナバーが欲しいです。

ここに画像の説明を入力

ただし、ナビゲーションバーの色は以前と同じように白です。

では、メディアクエリで変更するにはどうすればよいですか。

4

2 に答える 2

0

Sentencioとの議論から、 私は間違いを見つけました。今、私はそれをどのように解決したかを話します。

-webkit-gradient、-webkit-linear-gradient、-moz-linear-gradient、linear-gradient を使用して、すべての背景画像のプロパティを変更しました。以下のコード

.navbar-inner {
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #fafafa;
  background-image: -moz-linear-gradient(top, #04998D, #f2f2f2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#04998D), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #04998D, #f2f2f2);
  background-image: -o-linear-gradient(top, #04998D, #f2f2f2);
  background-image: linear-gradient(to bottom, #04998D, #f2f2f2);
  background-repeat: repeat-x;
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
  *zoom: 1;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
于 2013-08-30T08:26:03.590 に答える