1

だから私はCSSにかなり慣れていません。いくつかの継承があることは知っていますが、フォント以外に、それがどこに適用されるかは常にわかりません。だから私がやろうとしているのは、Twitterのブートストラップモーダルクラスを変更することです。これらのクラスで現在表示されているバックボーン ビューがあります。

modal hide fade

私がやりたいことは、モーダル ビューの幅と高さを拡張することですが、他のすべてのモーダル CSS プロパティはそのままにします。これを行う方法はありますか？自分のプロジェクトの local.less ファイルで、最初に Google で検索したことを試してみました。

しかし、私の見解はもはやモーダルではありませんでした。中央に配置されておらず、背景が暗くなっていませんでした。そこで、.modal クラスを twitter ブートストラップから local.less ファイルにコピーして、幅/高さを変更するだけでよいと考えました。だから私はこれでそれを試しました：

.modal-width-half (@modalWidth: 50%) {
  top: 50%;
  left: 50%;
  z-index: 1050;
  overflow: auto;
  width: @modalWidth;
  margin: -250px 0 0 -@modalWidth / 2;
  background-color: white;
  border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  *border: 1px solid #999999;
  /* IE6-7 */

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}

繰り返しますが、スタイルはモーダルではありません。私が行方不明または間違っていることはありますか? ありがとう。

4

1 に答える 1

1

私はこれをやったばかりで、あなたが見逃している行を共有できます.

モーダルの幅を変更するという私のコミットでは、プロパティとプロパティwidthも変更する必要がありました。これらの両方を変更することで、フォームを中央に保つことができます。margin-left

.modal {
  width: @modalWidth;
  margin-left: -@modalWidth / 2;
}

もちろん、これはサイトのすべてのモーダルに適用されます。1 つのモーダルだけに適用する場合は、クラス名をカスタマイズできます。

.my-modal { 
  width: @modalWidth; 
  margin-left: -@modalWidth / 2; 
}

これを html で次のように参照できます。

<div class="modal fade open my-modal">...</div>

.my-modalの定義がless/css ファイルの後 にあることを確認してください。そうしないと、定義がブートストラップ スタイルによってオーバーライドされます。.modal

于 2013-04-16T04:04:58.167 に答える