0

私は Twitter のブートストラップ Web サイトを持っていますが、壊れずにデザインを機能させる方法がわかりません。サイトの幅が約 770px よりも広い場合はうまく機能しますが、カルーセルの両側にある 2 つの div は、美的効果 (クライアントが望む方法) のために下に移動するために相対的に配置されます。問題は、サイトの幅が約 770px になると、右側の div が下の div と衝突し始め、約 735 で実際に壊れることです。問題を修正するためにメディア クエリ (メディア クエリの使用経験はあまりありません) を使用しようとしましたが、他の問題が発生するようです (CSS をすべて一貫性のある状態に保つことはできません)。 css との論争に何時間も費やす前に、より良い解決策を考えることができます。

ここで見ることができます：

http://www.mcquistonator.com/pdxmobilebootstrap/index.html

4

2 に答える 2

0

では、「top: ...;」を変更してください。2 つのサイド ボックスのそれぞれのルールを「margin-top: ...;」に指定します。これで問題が解決すると思います。

于 2013-06-15T01:47:54.107 に答える
0

@Skrivener は、フローティング div について完全に正しいです。

.valuelist {
  background-color: #787878;
  padding-left: 5px;
  border-radius: 5px;
  border: 2px solid #ffffff;
  position: relative;
  margin-top: 120px;
}

と

.affordable {
  position: relative;
  margin-top: 120px;
  background: #0e2b6f url('../img/peel.png') no-repeat fixed left top;
  color: #ffffff;
  border-radius: 5px;
  border: 2px solid #ffffff;
  padding: 5px;
  font-size: 150%;
  text-align: center;
  line-height: 120%;
}

ただし、注意すべき別の問題があります。

この img タグは頭痛の種になります。

/bootstrap.css:101
img {
  width: auto 9; /* the 9 is an error */
  height: auto;
  width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

ロゴとカルーセル画像のサイズを合わせて調整するためです。カルーセル画像が 100% に及ばない問題に対処したい場合 (サイトを 1330 ピクセル以上または 767 ピクセルで表示して、カルーセル画像が完全に引き伸ばされないことを確認してください)、width: 100%;この css に次を追加する必要があります。

/bootstrap.css:5983
.carousel-inner > .item > a > img {
  display: block;
  line-height: 1;
  width: 100%; /* add this one to fix span issue */
}

私の記憶が正しければ、これはあなたの宝石からコンパイルされています（Railsの場合）。したがって、この短いバージョンを bootstrap-and-overrides.css に追加する必要がある場合があります。

/bootstrap-and-overrides.css
.carousel-inner > .item > a > img {
  width: 100%; /* add this one to fix span issue */
}

もう 1 つ 知っていることは、あなたはメディア クエリをあまり気にしていないということですが、スパンが崩れると 767 ピクセルより下の上部マージンが狂ってしまうということです。

bootstrap-and-overrides.cssこれをファイルに追加することをお勧めします。

@media (max-width) {
  .affordable, .valuelist {
    margin-top: 0px;
  }
}

これにより、ページの空白スペースがきれいにクリーンアップされます。

于 2013-06-15T02:50:50.740 に答える