0

Twitter Bootstrapを使用して、自分のWebサイトで厄介な「問題」に遭遇しました。デフォルトの.containerブートストラップクラスを使用するメインコンテナがあり、カスタムcssファイルで特定の幅を指定しています。ただし、bootstrap-sensitive.cssファイルをHTMLドキュメントに含めると、コンテナの幅が上書きされるようです。

これは私のCSSファイルの順序です:

 <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/> 
 <link rel="stylesheet" type="text/css" href="/css/Site.css"/>
 <link rel="stylesheet" href="/css/bootstrap-responsive.css"/>

レスポンシブcssファイルに幅が指定されているのはどのような理由ですか?bootstrap-response.cssを手動で編集せずにこれを修正するスムーズな方法はありますか(これは悪い考えだと思います)

サイトをモバイル/タブレット対応にするために、bootstrap-sensitive.cssが必要です。

4

3 に答える 3

1

適切な構造を維持するために必要なのは、ブートストラップの最小幅です。一方、ブートストラップレスポンシブの後にcssコードを配置するだけでルールがブートストラップのルールを上書きします。

于 2013-02-23T10:20:10.783 に答える
0

個人的には、他のすべてのCSSファイルの後に独自のカスタムスタイルシートをロードする傾向があります。ただし、グローバルプロパティのデフォルト値を変更しないように注意する必要があります...またはレイアウト関連のプロパティ(例:.container)

一般に、このクラスは複数回再利用され、さまざまなデバイスや状況に合わせて調整される場合があります。したがって、bootstrap-response.cssでこのような値を変更することをお勧めします。これは、すべてのメディアクエリを含むファイルです。

そうしないと、目的の応答性が上書きされてしまい、!important例外を含むCSSプロパティが生成される可能性があります。これは絶対に避けてください。

于 2013-04-03T23:11:11.670 に答える
0

CSSを使用する場合、スタイリング情報の最後のインスタンスが優先されます。たとえば、2つの異なるスタイルシートにリンクする場合、競合がある場合は2番目のスタイルシートが優先されます...

<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="style.css" />

この例では、.container要素がstyle.cssファイルの変更である場合、style.cssのスタイリングデータは競合がある場合にのみ優先されます。この効果は、単一のHTMLドキュメントに外部CSSとインラインCSSの両方があることに似ています。これが説明するjsFiddleです。ここでは、インラインスタイリングが優先され、背景を黒のままにしてテキストの色をオレンジ色にしたことがわかります。

于 2013-04-04T00:09:05.253 に答える